我正在寻找使以下工作可行的任何想法。我需要重新排序(仅使用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中看到的那样,它的滑动机制使它具有两列并仍能正常工作的唯一方法是获取此有趣的之字形顺序。当然,我愿意接受任何其他建议:-)预先感谢!

最佳答案

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

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

但是,由于CSS3尚未稳定下来,因此简短的答案是“否”,这是不可能的。

但是,通过在浏览器中引入全页面缩放功能,您现在可以在以前不建议使用的像素级布局中进行操作。您知道列的大小,因此可以使用不同的方法对齐它们。

08-28 22:22