Html 定位Div'；s

目前我正在与

最终，我试图让一个视差网站运行起来，但我正在努力解决最初的布局问题。我正在尝试获得以下布局：

-------------------------------------
|                                    |
|                                    |
|           ______  ______           |
|           |       |     |          |
|           |       |     |          |
|           ______  ______           |
|                   |     |          |
|                   |     |          |
|                   ______           |
|                                    |
-------------------------------------

有什么建议吗？

试试：

您还需要关闭

标记

<div class="whatever" />

是不正确的，它必须是正确的

<div class="whatever"></div>

---

你关闭div的方式不是在小提琴中关闭它们。这将创建类似于图表的内容

<div id="main">
    <div id="chapter1">
        <div id="chapter1_1"></div>
        <div id="chapter1_2"></div>
        <div id="chapter1_3"></div>
    </div>
</div>

---

我已经更新了小提琴，背景是绝对的，其他的div是相对的

Please refer link http://jsfiddle.net/MarmeeK/ngZdg/19/

CSS是这样的

@charset"utf-8";
 #main {
    background:pink;
    width:1280px;
    height:900px;
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    margin:0;
    padding:0;
}
#chapter1 {
    margin:100px auto 100px auto;
    background: blue;
    height:500px;
    width:800px;
    padding:100px;
}
#chapter1_1, #chapter1_2, #chapter1_3 {
    width:200px;
    height:200px;
    position:relative;
    display:block;
    margin:0;
    padding:0;
    float:left;
}
#chapter1_1 {
    background-color:red;
    left:100px;
}
#chapter1_2 {
    background-color:yellow;
    left:100px;
}
#chapter1_3 {
    clear:both;// to clear the float to next line.
    background-color:green;
    left:300px;
}

---

我相信这样就可以了。：）

哪个框应该是代码中的1\u 1、1\u 2、1\u 3？

Please refer link http://jsfiddle.net/MarmeeK/ngZdg/19/

@charset"utf-8";
 #main {
    background:pink;
    width:1280px;
    height:900px;
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    margin:0;
    padding:0;
}
#chapter1 {
    margin:100px auto 100px auto;
    background: blue;
    height:500px;
    width:800px;
    padding:100px;
}
#chapter1_1, #chapter1_2, #chapter1_3 {
    width:200px;
    height:200px;
    position:relative;
    display:block;
    margin:0;
    padding:0;
    float:left;
}
#chapter1_1 {
    background-color:red;
    left:100px;
}
#chapter1_2 {
    background-color:yellow;
    left:100px;
}
#chapter1_3 {
    clear:both;// to clear the float to next line.
    background-color:green;
    left:300px;
}