我正在尝试将一个小缩略图库放在一起，并遇到了轻微的障碍。结构非常基础，如下：
[父容器] [x个子元素] [/ parent container]
我想将我的子元素加载到父容器中，如下所示：
例1
[0] [2] [4] [6] [8]
[1] [3] [5] [7] [9]
我想知道的是，如果有一个纯CSS解决方案，或者我将不得不用javascript定位我的元素。
知道浏览器想要像这样加载项目
示例2
[0] [1] [2] [3] [4]
[5] [6] [7] [8] [9]
我很确定没有非javascript方式来实现这一点，但我想问一下是否有人对这种布局有任何想法或经验。
最终目标是完成两件事：
1.让父容器在添加新元素时水平增长
2.保持2行布局，如示例1中所述。
答案 0 :(得分：6)
请参阅下面的更新
我想我来到一个纯粹的CSS3解决方案，涉及3D转换：你可以在这里看一下 webkit only 演示：http://jsfiddle.net/7fUxz/
基本上，这个演示背后的想法是从一个基本元素位移开始，浮动包装器和子元素 - 我为了简单起见使用了<ul><li>并创建了一个clear:left起始形式{{1以这种方式：
li:nth-child(2n+1)然后我旋转[0][1]
[2][3]
[4][5]
[6]...
，以便整个列表旋转-90度，然后用translateX / Y重新定位以进行右对齐。
但是列表项也将被旋转：因此对每个ul应用反向Z旋转。沿着X轴的另一个<li>旋转对于给列表项正确的顺序也是必要的。即使在这种情况下，也需要进行一些X | Y平移的调整
结果是
180deg在小提琴http://jsfiddle.net/7fUxz/3/的第3版中，您可以看到如何调整列表中的某些属性，以便正确定位前后的元素。
注意：此演示仅适用于webkit。有关支持3D变换的浏览器列表，请查看http://caniuse.com/transforms3d
<强>更新
我已经做了进一步的实验：如果你将[0][2][4][6][8]
[1][3][5][7]...
（而不是float:right）应用到每个float:left 3D转换不再需要（因为元素已经按正确的顺序排列）旋转<li>时按行排序，并且css规则大大简化
<ul>所以这个叉子
http://jsfiddle.net/fcalderan/2BDxE/
增加了支持（令人惊讶的是更加尊重CSS3 [1][0]
[3][2]
[5][4]
...[6]
用法），因为它甚至可以在Firefox 3.5，Opera 10.5和MSIE 9上运行（我还没有测试过）：http://caniuse.com/transforms2d。
对于较旧的IE，考虑使用Matrix Filter提供替代样式（通过条件注释）或某种js / activeX效果
答案 1 :(得分：0)
在不太了解信息如何被引入的情况下，有一种使用CSS3多列的纯CSS方式。 BUt，它的CSS3和多列模块仅适用于最新版本的Firefox和Webkit浏览器;据我所知，IE9仍然不支持它。
您可以通过以下链接阅读有关CSS3多列的更多信息，以及如何正确使用它们。
我之前曾经使用过一个列脚本，虽然有点旧，可能对你有帮助。 http://www.csscripting.com/css-multi-column/
希望这有帮助！