<分区>
也许我以错误的方式解决这个问题，但我正在尝试创建一个 <ul>充满了这样的元素:
<li>
<div>
<img src="img/productname.png" alt="desc" />
<h2>Product name</h2>
<p>This text is variable in lenght so the height of each list item may differ.</p>
</div>
</li>
由于正在运行的网站有最大宽度，我需要在一定数量的元素(三个似乎是最佳点)之后换行，但我记不起如何去做。
图像都位于每一“行”的顶部并且下一行不被前一行打断也很重要。如果我只使用 float:left;在列表项上，列表中的第一个元素的描述比另一个更长，然后我最终用这个元素阻止了下一行的元素，这样我得到一个表格，如:
+-----+-----+-----+
| | 2 | 3 |
| 1 +-----+-----+
| | |
+-----+ 4 |
| |
+-----+
现在，我需要的是优雅地允许添加更多列表项并创建如下布局的东西:
+-----+-----+-----+
| | 2 | 3 |
| 1 +-----+-----+
| |
+-----+-----+
| 4 | 5 |
| +-----+
+-----+
这有可能吗，还是我只是在想象我以前创建过这样的布局？
(顺便说一句，我不想为此使用表格的原因是因为它不是表格数据，它是一个必须包装的产品列表，并且清楚地搜索任何同时具有“css/html”和“网格”的内容“由于当前的网格布局时尚，它是无望的)