Помогите сверстать нестандартное поведение [Решено]

Question

[NemeZZiZZ]

Здравствуйте.

Необходимо сверстать немного нестандартное поведение блоков — без использования javascript и media-query.
Идея заключается в том, что блоки при малом разрешении экрана располагаются друг под другом и их содержимое находится по центру, но когда ширина экрана позволяет — блоки выстраиваются один за другим, например по 50% ширины.

Избил уже множество вариантов, адекватно получается это сделать только с помощью media-query.

Есть ли у кого какие-то идеи?

Answer 1

[hom9k]

jsfiddle.net/HwD3R/

Скорее всего будут проблемы в IE6-IE7 – к сожалению, нет возможности проверить

Comments

[hom9k]

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

[Сергей Протько]

Как костыль на этот случай можно у родительского блока поставить font-size:0 или white-space:-0.25em;

[NemeZZiZZ]

Отлично! Огромное спасибо! Для младших браузеров у меня постоянно используется кроссбраузерный сниппет inline-block — главное, я понял Вашу идею. Ещё раз спасибо!

Answer 2

[Chii]

Верстайте дивами, указывайте ширину блоков и флоат, будет всё как надо.

Вот например, если сделать:



То при ширине контейнера, в котором они лежат, меньше шестисот пикселей — выстроятся дуруг-под-другом
А если больше, то в две колонки.

Такова моя идея.

Comments

[Chii]

Хабр съёл вод =(
там было
Хабр, зачем ты съел мой код?

[Chii]

Мм… Предпросмотр показывает код, а когда напишу — ничего нет =(
пробую без углоскобок
div style=«width:300px;float:left» /div
div style=«width:300px;float:left» /div

[IkaR49]

Хабр завтракает.

[Анатолий]

> = >
&lt; = <
Вы веб разработчик или нет? Используйте безопасные знаки.

[werdender]

Хе хе )

[NemeZZiZZ]

Не так. Блоки не должны флоатиться, а должны встать по центру. Решение ниже — у hom9k.