Стайлинг списки с естественным поведением

Я хочу, чтобы стиль список CSS, как этотСтайлинг списки с естественным поведением

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

который не является в основном не проблема при использовании поплавка: левое Но есть проблема, когда [4] является heiger чем 3 происходит следующее:

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

Но я хочу вести себя так:

[ 1 ][ 2 ] 
[ 3 ][ 4 ] 
[ 5 ][ ] 
[ 7 ][ 6 ]

Мольба se взгляните на проблему: http://xbox360livegold.nl/gastenboek

источник

2010-11-03 Nico

Лучшая часть моего утра до сих пор: наблюдая, как старые люди притворяются игральными видеоиграми. –

не должен 6 и 7 быть наоборот в вашем последнем примере? – oezi

@oezi: Я так не думаю. Он хранит нечетные элементы в левой колонке. –

Я не думаю, что вы сможете сделать это в чистом CSS, если не знаете заранее, что каждый элемент будет выглядеть, и я предполагаю, это для раздела новостей на сайте, на котором вы выстроились. Вы можете использовать что-то вроде JQuery Masonry library, чтобы выполнить его.

источник

2010-11-03 14:41:03 Emily

+1, интересный плагин. – casablanca

Библиотека jQuery Masonry выглядит так, как мне нужно :-) Чистый CSS был бы более жестким. – Nico

Масонство сработало! – Nico

Если вы хорошо с отображаемыми элементами сверху вниз, а не слева направо, то есть, как это:

[ 1 ][ 4 ] 
[ 2 ][ ] 
[ 3 ][ 5 ]

, то вы можете использовать CSS3 multi-column feature. Установка столбца-счетчика на 2 автоматически делит элементы на два столбца.

источник

2010-11-03 14:45:35 casablanca

Они должны быть в хронологическом порядке, поэтому их невозможно показать сверху вниз. – Nico

@ Morgen32: Тогда, я думаю, вам придется пойти с другим ответом (масонство). Я не думаю, что это возможно с использованием чистого CSS. – casablanca

Стайлинг списки с естественным поведением

ответ

Смежные вопросы