需要幫助才能獲得正確的CSS佈局

Question

我對CSS有很好的理解，但對CSS佈局知之甚少。現在我需要以下佈局（忽略DIV大小）

但我得到這個

這是我的HTML和CSS

CSS：

#container 
{ 
    position:relative; 
    top:25px; 
    left:25px; 
    width:1024px; 
    height:100%; 
    margin-left: auto; 
    margin-right: auto; 
    background: red; 
} 
#top-left 
{ 
    position:relative; 
    top:25px; 
    left:25px; 
    width:700px; 
    height:auto; 
    min-height:150px; 
    background: lightgreen; 
} 
#right{ 
    float:right; 
    min-height: 900px; 
    min-width: 200px; 
    margin-right: 10px; 
    background: orange; 
    /*margin-top: -100px; why this is needed?*/ 
} 
#left{ 
    float:left; 
    min-height: 700px; 
    min-width:300px; 
    background: blue; 
} 
#center 
{ 
    float:left; 
    min-height: 700px; 
    min-width:500px; 
    background: lime; 
} 

HTML：

<div id="container"> 
    <div id="top-left"> 
     This is the top left container which is at correct position 
    </div> 
    <div id="right" > 
    </div> 
    <div id="left" > 
    </div> 
    <div id="center" > 
    </div> 
</div> 

Fiddle

現在我有以下問題

1. 爲什麼在右側（橙色）的div默認情況下不對齊的頂部？我怎樣才能做到這一點？

2. 這兩個div（藍色和青檸）正在被上述div（綠色）所覆蓋。雖然我可以使用margin-top:50px進行更正，但是當我使用此選項並且左上角（綠色）格的高度增加時，右邊的div（橙色）也會向下移動並流出紅色容器。那麼正確的方法是什麼？

3. 這是一個普遍的問題，有時會讓我擔心，給定div尺寸（我們肯定不會增加尺寸）可以像400px X 300px那樣固定嗎？

Answer 1

請檢查該Solved Fiddle

改變你的HTML這樣

<div id="container"> 
    <div id="top-left"> 
     This is the top left container which is at correct position 
    </div> 
    <div id="right" > 
    </div> 
    <div id="left" > 
    </div> 
    <div id="center" > 
    </div> 
</div> 

CSS

#container 
{ 
    position:absolute; 
    top:25px; 
    left:25px; 
    width:1024px; 
    height:100%; 
    min-height: 900px; 
    margin-left: auto; 
    margin-right: auto; 
    background: red; 
} 
#top-left 
{ 
    position:relative; 
    top:25px; 
    left:25px; 
    width:700px; 
    height:auto; 
    min-height:150px; 
    background: lightgreen; 
    float:left 
} 
#right{ 
    margin-top:25px; 
    float:right; 
    min-height: 900px; 
    min-width: 200px; 
    margin-right: 10px; 
    background: orange; 
    /*margin-top: -100px; why this is needed?*/ 
} 
#left{ 
    float:left; 
    min-height: 700px; 
    min-width:300px; 
    background: blue; 
    position:relative; 
    margin-top:35px; 
} 
#center 
{ 
    margin-top:35px; 
    position:relative; 
    float:left; 
    min-height: 700px; 
    min-width:500px; 
    position:realtive; 
    background: lime; 
} 

Answer 2

好了，答案結合起來，你的問題1和問題2：

與基於浮動的佈局混合定位通常是一個壞主意，這些概念不拌勻。正如觀察到的，副作用包括divs的重疊（有時候這是需要的，通常不是）和盒子的奇怪位置。

爲了避免這些問題，我建議在這種情況下切換到純浮動用法：

橙格得到float:right（和寬度）
頂綠格沒有得到什麼特別的（也許height）
藍格得到float:left（和寬度）
中東的綠色格自動地填補了休息。如果它是這三列中最長的，則添加margin-left和-right。

Answer 3

對於您的問題，

• 1）您沒有分成兩個「列」，這是導致該右側未對齊因爲有之上的元素結構。

• 2）這是由於使用了position: relative;和top: 25px;/left: 25px;。當您使用這些樣式時，您需要更正其下方元素的頂部/左側。爲了對付這些風格，你可以添加一個邊距，或者如果他們被定位，你只需要添加25px加上你想要的空間。

• 3）可以給他們一個固定的大小，但有一些事情需要考慮：響應式網頁設計應該避免使用固定大小，如果你要有該div內的內容，以及什麼佈局需求應該都會影響你的決定。

---

這是我會怎樣，但你可以使用其他方法來代替calc由於移動的支持。

（！沒有calc你將需要設置固定的高度或使用%的保證金，但將努力同）

HTML結構：

<div class="wrapper"> 
    <div class="leftSide"> 
     <header> 

     </header> 
     <div class="sideBar"> 

     </div> 
     <div class="mainCont"> 

     </div> 
    </div> 
    <div class="rightSide"> 

    </div> 
</div> 

CSS佈局：

html, body { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 

.wrapper { 
    width: 80%; 
    height: 100%; 
    margin: 0 auto; 
    position: relative; 
} 

.leftSide { 
    width: 70%; 
    height: 100%; 
} 

header { 
    width: 100%; 
    height: 20%; 
    background: mediumSeaGreen; 
    margin-bottom: 10px; 
} 

.sideBar { 
    width: 30%; 
    height: calc(80% - 10px); 
    background: brown; 
    float: left; 
} 

.mainCont { 
    width: calc(70% - 10px); 
    height: calc(80% - 10px); 
    margin-left: 10px; 
    background: tan; 
    float: left; 
} 

.rightSide { 
    width: calc(30% - 10px); 
    height: 100%; 
    background: #2b2b2b; 
    position: absolute; 
    top: 0; 
    right: 0; 
} 

終於小提琴：DEMO

Answer 4

這將是我的選擇，以解決這個：

#container { 
    padding: 25px; 
    width:1024px; 
    min-height:900px; 
    margin-left: auto; 
    margin-right: auto; 
    background: red; 
} 
#top-left { 
    float:left; 
    width:790px; 
    height:175px; 
    min-height:150px; 
    background: lightgreen; 
    margin-bottom: 25px; 
} 
#right { 
    float:right; 
    min-height: 900px; 
    min-width: 200px; 
    margin-right: 10px; 
    background: orange; 
} 
#left { 
    float:left; 
    min-height: 700px; 
    min-width:250px; 
    background: blue; 
    margin-right: 25px; 
} 
#center { 
    float:left; 
    min-height: 700px; 
    min-width:515px; 
    background: lime; 
} 

這一切都取決於你想如何流體的佈局是，但我刪除了大部分的位置屬性（通常不以花車反應良好）並添加了幾個維度。

http://jsfiddle.net/TNbHZ/1/

Answer 5

我建議這個更好的標記。另外，如果可能的話，您應該避免使用position。

這是我推薦的標記。

<div class="container"> 
    <div class="main-left"> 
     <div class="header"></div> 
     <div class="content-left"></div> 
     <div class="content-right"></div> 
    </div> 
    <div class="main-right"></div> 
</div> 

簡要CSS，是在這裏：

body{background:#F00} 
.container{margin:0 auto; width:1024px;} 

.main-left{float:left; width:800px} 
.main-right{background:orange; float:right; height:620px; width:200px} 

.header{background:green; height:150px; margin-bottom:20px;} 
.content-left{background:blue; float:left; height:450px; width:300px} 
.content-right{background:lime; float:left; height:450px; width:500px} 

注：Ofcourse清除浮動是必要的！

POC上的jsfiddle：http://jsfiddle.net/mgcq6/