使用 CSS 从上到下、从左到右对列表项进行排序

Question

底部更新

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

例如：

<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

这只能用 CSS 实现吗？

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

我可以轻松获得具有垂直扩展的固定宽度列表，但转置似乎很困难。如果需要，我会在页面上使用 jQuery，但我更喜欢仅使用 CSS 选项。

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

更新 2： 工作！我改变了单元格内的对齐方式，使用了变换旋转和变换原点以及相对定位来让一切正常工作。也许不是最优雅的解决方案，但我会接受！ Complete Solution

Answer 1

你可以使用column-count。

ul {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
}

jsFiddle example - 似乎产生了预期的结果。

Answer 2

对于固定高度列表，您可以通过组合 CSS 列（请参阅 JoshC 的答案）和writing-mode 属性（目前在 IE 中支持，对 IE7 的支持有限）来实现。

以下 jsfiddle example 似乎在 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;
}