Question

通常情况下，我使用ul来获得这样的产品列表，只需将“float：left”添加到li中即可运行：

p1 p2 p3 p4
p5 p6 p7 p8

现在我处于这样的情况：我希望它适合这样：

p1 p4
p2 p6
p3 p7
p4 p8

这可能吗？

编辑：

p1中的内容是动态的，大小（高度）可能不同。所以我正在寻找类似文章布局的东西。等等：也许第一个列表中只有3个产品的空间，下一行中只有4个。所以我不能使用两个不同的列表，因为内容和产品可以改变。

Answer 1

你可以使用CSS3 multi-column module但它还没有广泛的支持（即在IE中不起作用）。

Answer 2

这有效：

CSS：

<style type="text/css">
ul {
    float:left;
}
.clearlist {
    clear:both;
    margin:0 410px 0 34px;  
 }
</style>

HTML：

<ul>
    <li>p1</li>
    <li>p2</li>
    <li>p3</li>
    <li>p4</li>
</ul>

<ul>
    <li>p5</li>
    <li>p6</li>
    <li>p7</li>
    <li>p8</li>
</ul>

<div class="clearlist"></div>

Answer 3

我建议这样做。将列嵌套在li元素中。

<强> CSS：

ul      { overflow:hidden }
li      { float:left }
li li   { float:none }

<强> HTML：

<ul>
    <li>Column 1
        <ul>
            <li>Lorem</li>
            <li>Ipsum</li>
        </ul>
    </li>
    <li>Column 2
        <ul>
            <li>Dolor</li>
            <li>Sit</li>
            <li>Amet</li>
        </ul>
    </li>
</ul>
<p>This text is not floated because the list has overflow set to 'hidden'.</p>

如果内容是动态的，只需让您的脚本将其解析为不同的列表。

Answer 4

您可以从this article中选择您的方法。如您所见，您将不可避免地要妥协。

在垂直方向上显示HTML UL

4 个答案: