CSS - float LI - 更大的内容会弄乱下一行

Question

<style>
ul{margin:0px;padding:0px;}
ul li{margin:0px 5px 5px 0px;padding:0px;list-style-type:none;float:left;}
</style>

<ul class="clearfix">
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
</ul>

第一个内容比其他内容更多。

所以，我有以下问题:
problem http://img830.imageshack.us/img830/240/problemc.png

但是我如何向下移动下一行，所以它看起来像这样: want this http://img440.imageshack.us/img440/9750/solutionm.png

我尝试使用 display:inline-block; 而不是 float:left; 作为 lis，它有效，但我会仍然宁愿使用 float:left; 而不是 inline-block。

关于如何做到这一点有什么想法吗？

IE 解决方案:
http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

Answer 1

最好的解决方案是使用一种鲜为人知的显示样式，称为表格单元格。

我不得不这样做几次。操作方法如下:

/* -*- CSS -*- */
ul li .wrapper
{
    display:table-cell;
    width:100px;     /*replace here*/
    min-height:100px;/*  "     "   */
}

ul li
{
    float:left;
    display:inline-block;
}
ul
{
    display:table;
}

...

<!-- HTML -->
<ul>
    <li><div class="wrapper">my-content</div></li>
    <li><div class="wrapper">my-content</div></li>
    <li><div class="wrapper">my-content</div></li>
    <li><div class="wrapper">my-content</div></li>
</ul>    

这是如何工作的:

当解析器发现存在 UL 对象时，它会将其视为表格而不是列表。这给你带来了明显的优势，你开始/行动/就像你在使用表格一样(但你不是!)

然后该规则针对包装类运行——这将创建一个“表格单元格”。我们不想将其放在 li 中，因为否则 li 将充当表格单元格。这有点糟糕。解决方法是你的 li 实际上是左对齐的。对于这样做是否是一个好主意存在一些争议——这是“最有效的”，因为它迫使盒子模型遵守。我知道这很丑陋。

将 li 视为表格单元格的原因是它不会换行。它不会换行的原因是表格单元格不应该换行。

还有一种其他解决方案可能有效，但我尚未对其进行测试。

/* -*- CSS -*- */
ul li { display: inline-block; float:left; min-height:200px;width:200px; }

它并不难看，但它应该通过使盒模型强制对齐来工作。