Как сделать так, чтобы inline-block при переносе на новую строку занимал всю ширину контейнера?

Question

[prosto_anton]

Есть контейнер, в котором два элемента inline-block, требуется, чтобы при уменьшении ширины экрана до определенного размера один элемент переносился под другой и оба они занимали всю ширину контейнера. jsfiddle.net/L79BF/1

Можно ли это сделать без media-запросов? (мало ли :-) )

Answer 1

[Анна Бакурова]

То что вы описываете несёт в себе хоть и простейшую, но логику. Поэтому это минимум медиа запрос

Comments

[prosto_anton]

Спасибо. Просто я не знаю всех возможностей css :)

[prosto_anton]

Вот и предполагаю различные варианты.

[Анна Бакурова]

Все учатся и не всё могут знать))

Answer 2

[Alexander Mischuk]

А чем медиа-запросы не устраивают? У них ведь отличная поддержка.
Для таких вещей обычно задают 100% ширину, блочное отображение и очищают от флоатов.

Comments

[prosto_anton]

Спасибо за ответ. Но ведь если задать 100% ширину, то рядом друг с другом эти блоки не встанут, а мне это нужно при достаточной ширине экрана.

[Alexander Mischuk]

@prosto_anton 100% ширины блока задается, как и остальные свойства, через медиа-запрос "при достаточной ширине экрана".

[prosto_anton]

Спасибо за ваши комментарии.

Answer 3

[Евгений Низамиев]

Наверняка можно сделать с помощью JS, но медиазапросами будет куда элегантнее

Comments

[prosto_anton]

Спасибо. JS, конечно, не вариант.