Формат HTML DIV

Я хочу создать простой макет, как показано ниже.

Может кто-нибудь, пожалуйста, скажите мне, как я могу это достичь? Пожалуйста, простите "откровенность", я исхожу из фона С#, поэтому разработка WEB-интерфейса немного сложна для меня.

Update: Я жонглирую вокруг и CSS, но не создаю то, что хочу.

Ответ 1

Это может помочь вам:

<body>
<div style="border: 1px solid; float: right; width: 25%; height: 1000px;" id="1">one</div>
<div style="border: 1px solid; height: 250px; width: 74%;" id="1">two</div>
<div style="border: 1px solid; width: 35%; float: right; height: 750px;" id="1">three</div>
<div style="border: 1px solid; width: 35%; height: 750px;" id="1">four</div>
</body>

Ответ 2

В то время как мы могли бы написать весь код, который вам понадобится для реализации этого макета, это не будет полезно для вас, если вы не знаете CSS. Однако мы можем указать вам в правильном направлении.

Это может быть достигнуто с помощью правила Float с CSS. Здесь ссылка

Хорошее базовое понимание HTML также должно быть обеспечено для семантического изложения этого. Codecademy проведет вас через HTML и CSS, если вам нужна помощь со всем этим.

Ответ 3

<HTML>
    <HEAD>
        <TITLE>Working with div</TITLE>
        <META CHARSET="UTF-8" />
    </HEAD>
    <BODY>

        <link rel=stylesheet href="div.css" type="text/css">


        <div class="a2">two</div>
        <div class="a1">one</div>
        <div class="VerticalSpace"></div>
        <div class="a3">three</div>
        <div class="HorizontalSpace"></div>
        <div class="a4">four</div>

    </BODY>
</HTML>

и содержимое файла div.css

    .a1, .a2, .a3, .a4
    {
        border: 4px solid;
    }

    .VerticalSpace, .HorizontalSpace
    {
        border: 0px;
        float: left;
    }

    .a2
    {
        height: 250px;
        float: left;
        width: 74%;
    }

    .a3
    {
        height: 350px;
        float: left;
        width: 35%;
    }

    .a4
    {
        height: 350px;
        float: left;
        width: 35%;
    }

    .a1
    {
        height: 617px;
        width: 23%;
        float: right;
    }

    .VerticalSpace
    {
        width: 60%;
        height: 10px;
    }

    .HorizontalSpace
    {
        height: 350px;
        width: 4%;
    }

Ответ 4

Двухэтапная компоновка div с текущим левым и фиксированным правым столбцом
http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/
Эта ссылка сообщает вам, как обрабатывать макет двух столбцов. Сначала просто сделайте это, чтобы иметь два столбца влево и вправо, после этого сделайте это снова для левых столбцов.

Ответ 5

Сетчатая система CSS, например 960.gs, или Twitter bootstrap поможет в массовом порядке получать макеты для работы по своему желанию.