在3列布局的中間的清晰元素

Question

a有三個列布局，我想在中間列中有三個div，但每次我的內容在邊欄比中間div的內容「更長」時，盒子在「最長的div」下跳下去。這裏是我的代碼：

<div style="float: left; width: 15%; background-color: yellow;"> 
<p>left</p> 
<p>left</p> 
<p>left</p> 
</div> 
<div style="float: right; width: 15%; background-color: pink;"> 
<p>right</p> 
<p>right</p> 
<p>right</p> 
<p>right</p> 
</div> 
<div style="margin-left: 20%; margin-right: 20%;"> 
<div style="float: left; width: 20%; background-color: blue; margin: 1%"> 
    middle 
</div> 
    <div style="float: left; width: 20%; background-color: blue; margin: 1%"> 
    middle 
</div> 
    <div style="float: left; width: 20%; background-color: blue; margin: 1%"> 
    middle 
</div> 
<div style="clear: both;"></div> 
<div style="float: left; width: 20%; background-color: blue; margin: 1%"> 
    middle 
</div> 
    <div style="float: left; width: 20%; background-color: blue; margin: 1%"> 
    middle 
</div> 
<div style="float: left; width: 20%; background-color: blue; margin: 1%"> 
    middle 
</div> 
<div style="clear: both;"></div> 
<div style="float: left; width: 20%; background-color: blue; margin: 1%"> 
    middle 
</div> 
    <div style="float: left; width: 20%; background-color: blue; margin: 1%"> 
    middle 
</div> 
<div style="float: left; width: 20%; background-color: blue; margin: 1%"> 
    middle 
</div> 

這裏是爲了更好地理解在jsfiddle代碼。如果有人能夠向我解釋「清算」，我會很高興。

編輯： 我跟着這個教程http://css.maxdesign.com.au/floatutorial/tutorial0406.htm

Answer 1

您的中間div被呈現爲塊級元素，並且是爲什麼被推送與您的側邊欄div的內容。將它浮動到左側並向其添加合適的寬度以解決問題。中間格寬度= 20％+ 20％邊距+ 15％+ 15％邊欄寬度= 70％+ 30％中間格= 100％。

http://jsfiddle.net/DyHGP/5/

Answer 2

這是因爲以下的原因，你必須每三個div的了。

<div style="clear: both;"></div> 

清除功能用於在浮動狀態下刪除任何元素。使用明確：兩者;意味着它將清除任何向左或向右漂浮的東西。

一個快速解決方法是刪除這些元素，並將中間列中每個div的寬度增加到30％，然後強制第四個到下一行。