水平div内的2行元素布局

Question

我正在尝试将一个小缩略图库放在一起,并遇到了轻微的障碍.结构非常基础,如下:

[父容器] [x子元素数] [/父容器]

我希望我的子元素加载到父容器中,如下所示:

例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中所述.

Answer 1

请参阅下面的更新

我想我来到一个纯粹的CSS3解决方案,涉及3d转换:你可以在这里看一个webkit唯一的演示:http://jsfiddle.net/7fUxz/

基本上,这个演示背后的想法是从一个基本元素位移开始,浮动包装器和子元素 - 我<ul><li>为了简单起见而使用了一个clear:left起始形式li:nth-child(2n+1)- 这样:

[0][1]
[2][3]
[4][5]
[6]...

然后我旋转Z,ul使整个列表旋转-90度,然后用translateX/Y重新定位以进行右对齐.

但是列表项也将被旋转:因此每个都应用反向Z旋转<li>.180deg沿着X轴的另一次旋转对于给列表项正确的顺序也是必要的.即使在这种情况下,也需要对X | Y平移进行一些调整

结果是

[0][2][4][6][8]
[1][3][5][7]...

在小提琴http://jsfiddle.net/7fUxz/3/的第3版中,您可以看到如何调整列表中的某些属性,以便正确定位前后的元素.

注意:此演示仅适用于webkit.有关支持3D变换的浏览器列表,请访问http://caniuse.com/transforms3d

更新

我已经做了进一步的实验:如果你应用float:right(而不是float:left)每个<li>3D转换不再需要(因为<ul>旋转时元素已经按行按顺序排列)并且css规则大大简化了

[1][0]
[3][2]
[5][4]
...[6]

所以这个叉子

有更多的支持(令人惊讶的是更加尊重CSS3的*-columns使用),因为它甚至可以在Firefox 3.5,Opera 10.5和MSIE 9上运行(我还没有测试过):http://caniuse.com/transforms2d.

对于较旧的IE,考虑使用Matrix Filter提供替代样式(通过条件注释)或某种js/activeX效果