直向前CSS佈局

Question

我確信之前已經問過這個問題，但我真的很想知道爲什麼這樣做是做什麼的，而不僅僅是答案（如果有的話）。

我得到的是一個非常簡單的佈局，它由一個主包裝div，一個標題div，一個內容div和一個頁腳div組成。我遇到的問題是當我在內容div中放置多個方塊並將其位置設置爲絕對 - 以便將它們放在網格中以便它們跨越內容div的整個寬度。當我將這些div設置爲絕對值時，頁腳div跳轉並且不出現在坐在其父內容div中的div的網格下方。如果我將內容div的高度設置爲一個值，則頁腳div位於它應該在的位置，但如果我不設置它或將其設置爲自動（如我想要的那樣），則頁腳div有效地位於內容div下方。

我已經讀過，設置任何東西絕對把它從文檔的正常流程，但無論如何，我可以設置內容div，以便內容div的高度由內容設置（即網格的div），並且還要讓頁腳div始終位於content div下面？

這是一個模擬了http://jsfiddle.net/M4jyH/3/

這裏是我的代碼

#wrapper { 
width: 400px; 
height: auto; 
border: 1px solid #000; 
margin: 10px auto; 
padding: 10px;  
} 

#header { 
width: 100%; 
height: 50px; 
border: 1px solid #000; 
} 

#content { 
position: relative; 
width: 100%; 
/*height:92px;*/ 

border: 1px solid #000; 
margin: 10px 0px 0px 0px;   
} 

.box { 
position: absolute; 
width: 92px; 
height: 92px; 
background-color: #999;  
} 

#footer { 
position: relative; 
width: 100%; 
height:92px; 
border: 1px solid #000; 
margin: 10px 0px 0px 0px; 
} 


<div id="wrapper"> 

<div id="header">header</div> 

<div id="content"> 

    <div class="box" style="top:0px; left:0px;"></div> 
    <div class="box" style="top:0px; left:102px;"></div> 
    <div class="box" style="top:0px; left:205px;"></div> 
    <div class="box" style="top:0px; left:308px;"></div> 

</div> 

<div id="footer">footer</div> 

</div>​ 

Answer 1

你並不需要使用position: absolute的內部元素，使其定位水平只使用float: left有寬餘的空間。您仍然會獲得與內容區域相似的摺疊高度 - 因爲浮動內容部分也會從內容流中取出。但是，通過將overflow: hidden應用於內容區域，可以很容易地解決這個問題。

我已經添加了第一個和最後類的box元素，只是爲了讓操作更容易利潤率：

<div id="content"> 
    <div class="box first"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box last"></div> 
</div> 

我也改變了你的CSS項目如下：

#content { 
    overflow: hidden; /* <-- added overflow hidden */ 
    position: relative; 
    width: 100%; 
    outline: 1px solid #000; 
    margin: 10px 0px 0px 0px;   
} 

.box { 
    float: left; /* <-- replaced pos abs with float left */ 
    margin-right: 10.5px; /* <-- added a specific margin */ 
    width: 92px; 
    height: 92px; 
    background-color: #999;  
} 

.box.last { 
    margin-right: 0px; 
} 

隨着考慮使用10.5px作爲保證金，如果您重新評估使用的尺寸，這可能是最好的，所以這不是必需的。但是大多數現代瀏覽器會正確處理這個問題。

http://jsfiddle.net/M4jyH/5/

position: absolute真的應該僅用於你特別想要取出的公文流轉和不與任何其他干擾項。