这种问题不好Google，也许已经有许多人知道怎么解决了，不过我没有搜索到，为解决这问题，加起来花了应该有半天时间。我大致知道了一个重现的过程。
在一个比较窄的元素中，我想把几个词排成两列。用如下的代码（容器宽度是在外面的元素限制的）：
<div style="width:250px">
<div style="border:1px solid #0066CC;padding:10px;font-size:14px;text-align:left;">
<div style="margin-left:10px;float:left;width:100px">Test</div>
<div style="margin-left:10px;float:left;width:100px">Test</div>
<div style="margin-left:10px;float:left;width:100px">Test</div>
<div style="margin-left:10px;float:left;width:100px">Test</div>
<div style="margin-left:10px;float:left;width:100px">Test</div>
<div style="margin-left:10px;float:left;width:100px">Test</div>
<div style="margin-left:10px;float:left;width:100px">Test</div>
<div style="margin-left:10px;float:left;width:100px">Test</div>
<div style="clear:both"></div>
</div>
</div>
但效果是这样：
显然我想边框把这几个条目全部包起来（而且行间距也不应该那么大！）。最初的时候这几个词是相等字数即等宽的，于是我把”Test”的float属性去掉，加上display:inline。这时，宽度就无效了，但因为字符串等长，我就给它加了固定的margin，可以实现两列了，而且IE的border也把它们都包起来了。
不过最近需求变了，这几个词的长度不等了，用display:inline再加margin的办法不行了。该面对的问题还是要面对，尽管IE很垃圾，用它的人还是太多。仔细看上面代码显示的效果，IE似乎是认为那个框里只有三行（在我的应用里，它是认为只有一行），显然是处理float的高度有问题。知道这点后，我就在那些float元素的前面加了一个空的div，NND，这就没事了。
代码：
<div style="width:250px">
<div style="border:1px solid #0066CC;padding:10px;font-size:14px;text-align:left;">
<div></div>
<div style="margin-left:10px;float:left;width:100px">Test</div>
<div style="margin-left:10px;float:left;width:100px">Test</div>
<div style="margin-left:10px;float:left;width:100px">Test</div>
<div style="margin-left:10px;float:left;width:100px">Test</div>
<div style="margin-left:10px;float:left;width:100px">Test</div>
<div style="margin-left:10px;float:left;width:100px">Test</div>
<div style="margin-left:10px;float:left;width:100px">Test</div>
<div style="margin-left:10px;float:left;width:100px">Test</div>
<div style="clear:both"></div>
</div>
</div>
效果：
Leave a Reply