2-элементный элемент в горизонтальном div

Question

Я пытаюсь собрать небольшую галерею миниатюр и натолкнулся на небольшую хватку. Структура очень проста и заключается в следующем:

[родительский контейнер] [х количество дочерних элементов] [/ родительский контейнер]

Я хочу, чтобы мои дочерние элементы, чтобы загрузить в родительский контейнер таким образом:

пример 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. Храните 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, чтобы весь список повернулся на -90deg, а затем переместился с помощью translateX/Y для правильного выравнивания.

Но также элементы списка будут повернуты: поэтому обратное Z-вращение применяется к каждому <li>. Еще один поворот 180deg вдоль оси X также необходим, чтобы привести элементы списка в правильном порядке. Даже в этом случае некоторые корректировки с X | Y перевод необходим

В результате

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

В 3-й пересмотре скрипки http://jsfiddle.net/7fUxz/3/ вы можете увидеть, как настроить некоторые свойства в списке, так что элементы, прежде чем и после правильно расположены.

Примечание: эта демо работает только на веб-страницах. Список браузер с поддержкой 3D-преобразования смотреть на http://caniuse.com/transforms3d

Update

Я сделал следующий эксперимент: если вы применить float:right (вместо float:left) для каждого <li> 3D Transformations больше не нужны (потому что элементы уже в правильном порядке по строке, когда <ul> вращается), а правила CSS значительно упрощены

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

так что эта вилка

http://jsfiddle.net/fcalderan/2BDxE/

имеет повышенную поддержку (удивительно даже больше уважения CSS3 *-columns использования), так как он работает даже на Firefox 3.5, Opera 10.5 и, вероятно, MSIE 9 (я не проверял это): http://caniuse.com/transforms2d.

Для старшего IE считают служить альтернативный стиль (через условные комментарии), или какой-то Дж.С./ACTIVEX эффект использования Matrix Filter

Answer 2

Не зная слишком много о том, как втягивается информация, существует способ с чистым CSS с использованием нескольких столбцов CSS3. BUt, это CSS3, а многоколоночный модуль работает только с последней версией браузеров Firefox и Webkit; насколько я знаю, IE9 по-прежнему не поддерживает его.

Подробнее о CSS-колонках CSS3 можно прочитать по следующим ссылкам и как их правильно использовать.

• http://www.csscripting.com/css-multi-column/
• http://kmsm.ca/2010/an-almost-complete-guide-to-css3-multi-column-layouts/

Существует также сценарий столбец, который я использовал один раз, хотя и немного старый, может помочь вам. http://www.csscripting.com/css-multi-column/

Надеюсь, это поможет!