Question

也许我会以错误的方式解决这个问题，但我正在尝试创建一个充满了这样的元素的<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;并且列表中的第一项具有比另一项更长的描述，那么我最终会使用此项阻止下一行中的项目，以便得到如下表格： / p>

+-----+-----+-----+
|     |  2  |  3  |
|  1  +-----+-----+
|     |     |
+-----+  4  |
      |     |
      +-----+

现在，我需要的是优雅地允许添加更多列表项并创建如下布局的东西：

+-----+-----+-----+
|     |  2  |  3  |
|  1  +-----+-----+
|     |
+-----+-----+
|  4  |  5  |
|     +-----+
+-----+

这是否可能，或者我只是想象我之前已经创建了这样的布局？

（顺便说一句，我不想使用表格的原因是因为它不是表格数据，它是一个必须包装的产品清单，并且明确地搜索任何同时包含“css / html”和“grid”的内容“由于当前的网格布局时尚，它无望”

Answer 1

如果您不需要它在Firefox 2及更早版本中使用，则可以将<li> s display设置为inline-block。

要在IE 6（以及可能的IE 7，我忘记添加了适当的inline-block支持时）工作，您可以将它们设置为display: inline。只要他们有一个定义的width（我假设他们有），那么他们就会显示为inline-block - 见http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/

Answer 2

你可以在不使用表但是使用div的情况下实现这种效果。只需将1,2和3放在一个div中，将4和5放在另一个div中（显然将每个项目子集保留在自己的ul标签中）。不确定这是不是你想要的。听起来像是一个你想要实现的相当复杂的结构。

无序包装CSS列表布局问题

2 个答案: