jquery - CSS之字形 float

Question

我正在寻找使以下工作正常进行的任何想法。我需要重新排序(仅使用 css!)一个无序列表以以之字形方式输出其元素 - 让我解释一下:假设我们有一个简单的列表:

<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>

这将输出(给定一个简单的 float:left):

1   2   3   4   5    6
7   8   9   10  11  12

但我正在寻找一种输出方式如下:

1   3   5   7   9   11
2   4   6   8   10  12

为什么我需要这个？我尝试将缩略图导航更改为两行而不是一行 (=> http://landofcoder.com/demo/jquery/lofslidernews/ )

但正如我从生成缩略图导航的 Javascript 中看到的那样，它的滑动机制使它有两列并仍然正常工作的唯一方法是获得这个有趣的锯齿形顺序。当然，我愿意接受任何其他建议 :-) 提前致谢!

Answer 1

这只有使用 CSS3，使用新的多列布局才有可能:

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

但由于 CSS3 尚未稳定下来，简短的回答是否定的，那是不可能的。

但是，随着浏览器中全页缩放的引入，您现在可以在以前不鼓励的地方制作依赖于像素的布局。您知道列的大小，因此您可以使用不同的方法对齐它们。