无序包装CSS列表布局问题

也许我会以错误的方式进行操作,但是我正在尝试创建< 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”和“ grid”的任何内容由于当前的网格布局时尚而变得无望)

最佳答案

如果您不需要它在Firefox 2及更低版本中运行,则可以将< li>的显示设置为内嵌式.

为了使该功能在IE 6(可能还有IE 7,我忘记了何时添加了适当的内联块支持),可以将它们设置为显示：内联.只要它们具有定义的宽度(我认为它们有宽度),它们就会显示为好像它们是内嵌块一样-参见http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/