Ка задать трем вертикальным блокам одинаковую высоту и ширину?

Question

[ayapergenov]

Есть три обычных .col-lg-4 бутстраповских блока.
Как задать адаптивные параметры, чтобы они были одинаковой длины и ширины по высоте и по длине на всех расширениях не зависимо от контента?

Answer 1

[Максим Тимофеев]

Адаптивные - значит зависят от размера окна браузера.
Не адаптивные - значит имеют фиксированый размер.
Вы определитесь что Вам надо? Не может быть деревянное железо, как и адаптивный блок с фиксироваными размерами.

Comments

[ayapergenov]

Вопрос не в фиксированном размере, а в одинаковом размере. Допустим, первый блок имеет имеет размер 250 на 350px второй блок должен принять тот же размер. При изменении размера экрана должны одинаково меняться размеры блоков.

[Paul Denisevich]

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

[Максим Тимофеев]

vh и vw, как вариант.

[ayapergenov]

Спасибо. Вопрос решил фиксированным размером для каждого экрана через media. Большее не требовалось.

Answer 2

[Paul Denisevich]

Боюсь, что на чистом CSS с нормальной поддержкой основных браузеров, это не решить. Но можно быстро и удобно решить с помощью JS: brm.io/jquery-match-height

Comments

[Максим Тимофеев]

почему не решить? Есть много вариантов. Главное понять что конкретно надо. Например через еденицы vh и vw, как вариант.

Answer 3

[Stalker_darkway]

Вы если уж взялись за бутстрап, то почитайте хотя бы документацию по сеткам. Пропишите вот так "col-xs-4 col-sm-4 col-md-4 col-lg-4". Это решит проблему адаптивности. Если хотите высоту сделать одинаковую, то тут либо таблицей, либо что-то дополнительно подключать.

Comments

[Максим Тимофеев]

Достаточно xs, надо указывать минимальное.