4

底部更新

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

例如：

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

更新：我想我找到了一个可行的解决方案。使用变换小提琴

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

4

2 回答 2

3

你可以使用column-count.

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

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

于 2013-11-06T00:18:20.113 回答
1

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

以下jsfiddle 示例似乎在 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;
}
于 2013-11-06T02:13:51.530 回答