Заполнение пустого пространства плавающими блоками. Разбор 2-ух примеров реализации. От Яндекса и от студии Лебедева.

[xanf]

«Если-бы я подобный пост ...» — понимаю что пропущено слово «нашел», но звучит страшно :)

[avbejan]

поправил :)

[TanKaDo]

Яндекс сделан студией Лебедева, кстати говоря.

[spicyn]

Только дизайн.

[TanKaDo]

Ну, естественно, мы же о дизайне и говорим.

[spicyn]

Вы лишаете заслуженной славы весь отдел верстки компании «Яндекс» ;-)

[ozoned]

Не понял что такого примечательного в примере от САЛ, обычные зафлоченые блоки с минимальной высотой.

[avbejan]

Пример хорошо расписан. Думаю, что как пример окажется полезен многим.

[Mainer]

>> Заполнение пустого пространства плавающими блоками. Разбор 2-ух примеров реализации. От Яндекса и от студии Лебедева.

Забавно вы сократили четырехбуквенное слово «двух» четырехбуквенным же сокращением «2-ух»

[tenshi]

1 — очень неприятно скачет при изменении размеров окна (области вывода).

[ozoned]

Вот быстро набросал скрипт как на яндексе но без таблиц:
http://samples.ozoned.biz/floats.html.
Признаюсь, особой оптимизацией и «вылизываем» не занимался :)

[avbejan]

Согласен, но без javascript все рухнет.

[WebMast]

Вот все вылизано, красиво… И лучше чем у лебедева и у яндекса. Так как у яндекса таблицы… А у Лебева сотается пустое пространство. Т. е. не на всю ширину! Мое решение:

bitby.net/web/podstraivaem-bloki-po-shirine-i-polozheniyu/

[avbejan]

Но он принципиально отличается от яндекса ограничением по высоте блока и полной зависимостью от javscript. Вариант от яндекса тем и хорош, что размер блока может быть любым. А если javscript не поддерживается ничего не разъедется. Просто блоки перестанут перескакивать.

[ozoned]

И как-то не хорошо, вариант-то не ваш, статью на блоге «позаимствовали» у cssing.org.ua и даже авторство не указали.

[Timmmm]

А разве списки не подойдут для такой верстки?

[set]

обычно делаю это списком, элемантам которого прописываю:

ul li {display: -moz-inline-box; display: inline-block;}
*+html ul li {display: inline;}
* html ul li {display: inline;}

или я не правильно понял вопрос?