Jquery 使用CSS将列表项从上到下、从左到右排序

在底部更新

在允许水平扩展的固定高度无序列表中订购项目，但希望项目先从上到下，然后从左到右排列。这是为了将包含它们的表格单元格的高度保持在设定的高度，但允许其水平扩展

例如：

<td>
  <ul class="thumbnails">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
</td>

1 4
2 5
3

一,
二,
三,
四,
五,

1 4
2 5
3.

这是否仅适用于CSS

每个列表项都有固定的高度和宽度。 列表中的元素数未知且可变。 列表的所需高度是固定的（3x li高度）

我很容易得到一个垂直扩展的固定宽度列表，但转置似乎很困难。如果需要的话，我会在页面上使用jQuery，但是我更喜欢只使用CSS选项

更新：我想我找到了一个可行的解决方案

更新2:正在工作！我更改了单元内的对齐方式，使用“变换旋转”和“变换原点”以及“相对定位”来实现所有功能。也许不是最优雅的解决方案，但我会接受它

你可以用

---

-似乎产生了期望的结果。

对于固定高度列表，您可以通过组合CSS列（参见JoshC的答案）和属性（当前在IE中受支持，但对IE7的支持有限）来实现这一点

即使在IE7中，以下似乎也有效：

/* CSS for modern browsers */
ul {
    height: 6.1em;
    column-width: 6em;
    column-gap: 0;
    column-fill: auto;
}

li {
    display: inline-block;
    vertical-align: top;
    height: 2em;
    width: 2em;
}

/* IE9 writing-mode workaround */
ul {
    word-spacing: -.5em;
    writing-mode: tb-lr;
}

li {
    writing-mode: lr-tb;
    word-spacing: normal;
}

/* 'magic' workaround of IE7 limitation */
*+html ul {
    writing-mode: tb-rl;
    filter: flipV();
}

*+html li {
    display: inline;
    zoom: 1;
    filter:flipH();
    background: #fff;
}

---

唯一不需要JQ或服务器端脚本的解决方案。应该注意的是，无论项目的数量如何，将行数限制在最多三行都不起作用。也许我会尝试将列计数与轮换相结合。这种方法工作得近乎完美，唯一剩下的问题是，包含此列表的表格单元格正在扩展，如果它们不在列中显示，则会扩展到一行的完整宽度。这个问题发生在Chrome中。即使顺序不同，在IE中工作也很好。

/* CSS for modern browsers */
ul {
    height: 6.1em;
    column-width: 6em;
    column-gap: 0;
    column-fill: auto;
}

li {
    display: inline-block;
    vertical-align: top;
    height: 2em;
    width: 2em;
}

/* IE9 writing-mode workaround */
ul {
    word-spacing: -.5em;
    writing-mode: tb-lr;
}

li {
    writing-mode: lr-tb;
    word-spacing: normal;
}

/* 'magic' workaround of IE7 limitation */
*+html ul {
    writing-mode: tb-rl;
    filter: flipV();
}

*+html li {
    display: inline;
    zoom: 1;
    filter:flipH();
    background: #fff;
}