定位DIV的

Question

目前我與http://jsfiddle.net/ngZdg/

工作最終，我試圖讓視差網站去，但我與初始佈局問題掙扎。我試圖得到以下佈局：

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

有什麼建議嗎？

Answer 1

嘗試this：

@charset"utf-8"; 
#main { 
    background-color:pink; 
    width:1280px; 
    height:100%; 
    position:absolute; 
} 
#chapter1 { 
    background: blue; 
    width:90%; 
    height:90%; 
} 
#chapter1_1 { 
    background-color:red; 
    width:100px; 
    height:100px; 
    left:100px; 
    top:50px; 
    position:absolute;  
} 
#chapter1_2 { 
    background-color:yellow; 
    width:100px; 
    height:100px; 
    left:205px; 
    top:50px; 
    position:absolute; 
} 
#chapter1_3 { 
    background-color:green; 
    width:100px; 
    height:100px; 
    top:155px; 
    left:205px; 
    position: absolute; 
} 

您還需要關閉<DIV>標籤。

<div class="whatever" /> 

是不正確的，它需要

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

Answer 2

您關閉的div的方式是不是在撥弄關閉它們。這會創建類似於您的圖表的東西。

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

CSS：

html, body { 
    height:100%; 
    width:100%; 
    margin:0; 
    padding:0; 
} 
#main { 
    background-color:#00FF00; 
    width:100%; 
    height:100%; 
    /*position:absolute; 
    left:50%; 
    margin-left:-640px;*/ 
} 
#chapter1 { 
    background: blue; 
    height:100%; 
    position:relative; 
    width:100% 
} 
#chapter1_1, 
#chapter1_2, 
#chapter1_3 { 
    height:20%; 
    width:20%; 
    position:absolute; 
} 
#chapter1_1 { 
    background-color:red; 
    top:10%; 
    left:30%;  
} 
#chapter1_2 { 
    background-color:yellow; 
    left:50%; 
    top:10%; 
} 
#chapter1_3 { 
    background-color:green; 
    top:30%; 
    left:50%; 
} 

Answer 3

我已經更新了小提琴，與背景絕對的，其他分區是相對的定位

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; 
} 

我相信這會做。 :)