Задачка по адаптивному дизайну для искушенных

Question

[Никита Траторов]

http://jsfiddle.net/ccbpp/

Задача: сделать три имеющиеся блока одинаковой высоты и ширины, при сохранении резинового дизайна.
При сужении экрана, они должны перестраиваться в один столбец (в стопку), занимая всю ширину колонки.
Текст должен быть центрирован по вертикали относительно картинок. Картинки немного разнятся по размеру.
Части текста ссылки не должны переноситься под картинку. Допустим только полный перенос текста под картинку, но только при сужении экрана.

Участок кода предназначен для использования на устройствах с разным размером экрана, от десктопов до смартфонов.

P.S. Можно использовать код, который обрабатывает ширину экрана при сильном сужении экрана (менее 500px).
@media only screen and (min-width: 100px) and (max-width: 499px), only screen and (min-device-width: 100px) and (max-device-width: 499px) {...}

Answer 1

[Hmelii]

jsfiddle.net/ccbpp/27/

Comments

[Никита Траторов]

Прекрасное решение! Я бы даже сказал блестяще! Спасибо!

Answer 2

[Deleted Deleted]

Мне кажется, тут могло быть всё проще: просто юзать CSS-ключи "min-width" - "max-width", "min-height" - "max-height".