在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％，然后强制第四个到下一行。