Question

是否可以使用具有固定高度的标准无序列表，以使溢出元素流入下一列。

基本上我正在尝试实现杂志样式布局，其中每篇文章都是垂直堆叠的。

http://jsfiddle.net/uDAJy/1/

的示例代码

我希望编号为2的列表项位于下一列。

由于

本

解决方案

我将尽可能在@Sime发布的CSS3路线上下载。

对于IE：

由于页面上的文章是可变宽度，我没有在没有进行服务器端编程的情况下找不到干净的解决方案。

这涉及首先计算每列的项目数（原谅c＃）：

int itemsPerColumn = Model.Posts.Count / 5; // 5 columns on our page

if (Model.Posts.Count % 5 > 0) {
    itemsPerColumn++; // so 8 articles would yield 2 per column
}

然后我们遍历每篇文章并增加一个计数器。

如果i % itemsPerColumn == 0我们创建了一个开始列div。

渲染项目后，我们检查是否(i + 1) % itemsPerColumn == 0，如果是，则渲染一个结束列div。

然后我们增加计数器。

不如CSS3解决方案好，但它有效：）

Answer 1

这篇关于A List Apart的文章展示了一些最可接受的方法来实现你所追求的目标。

据我所知，目前还没有使用单个CSS属性等创建多列列表的原生方式。

Answer 2

你走了：

HTML：

<div class="wrapper">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
    </ul>
</div>

CSS：

.wrapper { 
    border:2px solid red;
    height:604px;
    width:464px;
    padding:16px;
    -webkit-column-width:144px;
    -webkit-column-gap:16px;
    -moz-column-width:144px;
    -moz-column-gap:16px;
    column-width:144px;
    column-gap:16px;
}

.wrapper li { 
    width:144px;
    height:108px;
    background:#ccc;
    margin:16px 0;
}

现场演示： http://jsfiddle.net/uDAJy/5/show/

这应该适用于IE以外的所有浏览器。（我的笔记本上只有Chrome，因此我无法在其他浏览器中对此进行测试。）

Answer 3

http://jsfiddle.net/uDAJy/2/

如果您可以定位支持CSS 3列数的浏览器。

http://www.w3.org/TR/css3-multicol/

具有水平溢出的垂直列表

解决方案

3 个答案: