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 only选项。

更新：我认为我找到了可行的解决方案。 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;
}

使用CSS从上到下，从左到右排序列表项

2 个答案: