2行元素布局在水平div [英] 2 row element layout within horizontal div
问题描述
我试图把一个小的缩略图库放在一起，并遇到一个轻微的障碍。结构非常基本，如下：
[父容器]
[x子元素]
[/父容器] p>
我要将子元素加载到父容器中，如下所示：
示例1
[0] [2] [4] [6] [8]
[1] [3] [5] [7] [9]
我想知道的是，如果有一个纯CSS解决方案，或者如果我将使用javascript定位我的元素。
知道浏览器想要加载像这样的项目
example2
[0] [1] [2] [3] [4]
[5] [6] [7] [8] [9]
我确定没有一种非JavaScript的方式这个但我想问，如果有人有任何想法或经验与这种布局。
最终目标是完成两件事情：
1.让父容器随着新元素添加而水平增长。
2.按照示例1所述保留2行布局。
strong>
我想到一个纯CSS3解决方案，涉及3d变换：你可以在这里看到一个 webkit只有 =http://jsfiddle.net/7fUxz/> http://jsfiddle.net/7fUxz/
基本上，这个演示背后的想法从一个基本元素位移开始，浮动包装和子元素 - 为了简单起见，我使用了< ul>< li> c> clear：left 起始格式 li：nth-child（2n + 1） - 以这种方式：
[0] [1]
[2] [3]
[4] [5]
[6] ..
然后I rotateZ ul 整个列表旋转-90deg，然后重新定位与translateX / Y为正确的对齐方式。
但是列表项也会被旋转：所以每个< li> 。沿着X轴的 180deg 的另一个旋转也是必要的，以给列表项目正确的顺序。即使在这种情况下，需要进行X | Y翻译的一些调整
结果是
[0] [2] [4] [6] [8]
[1] [3] [5] [7] ...
在小提琴的第三修订版中 http://jsfiddle.net / 7fUxz / 3 / ，您可以看到如何调整列表中的一些属性，以便前后的元素正确定位。
注意：只工作在webkit上。有关支持3D变换的浏览器列表，请参阅 http://caniuse.com/transforms3d
更新
我进行了进一步的实验：如果你应用 float：right （而不是 float：left ）到每个< li> （因为当旋转< ul> 时，元素已经按照行的正确顺序）和css规则被大大简化了
[1] [0]
[3] [2]
[5]
因此此叉
http://jsfiddle.net/fcalderan/2BDxE/
增加支持（令人惊讶的是甚至更尊重CSS3 * - columns 使用），因为它甚至在Firefox 3.5，Opera 10.5和可能的MSIE 9（我没有测试这个） a href =http://caniuse.com/transforms2d> http://caniuse.com/transforms2d 。
对于较旧的IE，请考虑使用矩阵滤波器
I'm trying to put together a small thumbnail gallery and have run into a slight snag. Structure is very basic and is as follows:
[parent container] [x number of child elements] [/parent container]
I want my child elements to load into the parent container like so:
example 1
[0][2][4][6][8]
[1][3][5][7][9]
What I want to know is if there is a pure CSS solution to this or if I'll have to position my elements with javascript.
Knowing that the browser wants to load the items in like this
example2
[0][1][2][3][4]
[5][6][7][8][9]
I'm pretty sure that there isn't a non-javascript way of achieving this but I wanted to ask if anyone had any ideas or experience with this kind of layout.
The ultimate goal is to accomplish 2 things:
1. Have the parent container grow horizontally as new elements are added to it.
2. Keep the 2 row layout as described in example 1.
See update below
I think I came to a pure CSS3 solution, involving 3d transformation: you can look a webkit only demo here: http://jsfiddle.net/7fUxz/
basically, the idea behind this demo is starting from a basic element displacement, floating both wrapper and children elements - I used <ul><li> for the sake of simplicity and made a clear:left starting form li:nth-child(2n+1) - in this way:
[0][1]
[2][3]
[4][5]
[6]...
then I rotateZ the ul so that the whole list is rotated by -90deg and then repositioned with translateX/Y for the right alignment.
But also list items will be rotated: so an inverse Z-rotation is applied to every <li>. Another rotation of 180deg along X-axis is also necessary to give list-items the correct order. Even in this case some adjustments with X|Y translation is needed
The result is
[0][2][4][6][8]
[1][3][5][7]...
In 3rd revision of the fiddle http://jsfiddle.net/7fUxz/3/ you can see how to adjust some properties on the list so that the elements before and after are correctly positioned.
Note: this demo is working only on webkit. For a list of browser supporting 3D-transforms look at http://caniuse.com/transforms3d
Update
I've done further experiment: if you apply a float:right (instead of float:left) to each <li> 3D Transformations are no longer needed (because elements are already in the right order by row when <ul> is rotated) and the css rules are greatly simplified
[1][0]
[3][2]
[5][4]
...[6]
so this fork
http://jsfiddle.net/fcalderan/2BDxE/
has an increased support (surprisingly even more respect CSS3 *-columns usage), since it works even on Firefox 3.5, Opera 10.5 and probably MSIE 9 (I haven't tested this) : http://caniuse.com/transforms2d .
For older IE consider to serve an alternative style (via conditional comments) or some kind of js/activeX effect using Matrix Filter
这篇关于2行元素布局在水平div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
