Одинаковая высота колонок DIV на CSS
 | |
| В материале рассмотрим, как правильно и корректно на сайте поставить 2 колонки, а точнее, как выровнять при помощи CSS колонки одинаковой высоты. Согласно текущим тенденциям дизайна веб-сайтов, большинство проектов имеют одинаковую высоту блоков. Как веб-дизайнеру очень сложно сделать это только с помощью CSS. Ниже приведены некоторые способы сделать блоки равной высоты с помощью CSS самым простым способом. Здесь мы собираемся узнать, как сделать 2 блока одинаковой высоты, где только задействуем стилистику. У многих дизайнеров есть такие проблемы, поэтому сегодня мы собираемся упростить создание любого веб-сайта в короткие сроки. Где начнем с простого примера, использующего только CSS, и в нем нет никакого использования Javascript. У каждого дизайнера есть цель создать дизайн с лучшим внешним видом. Первым делом необходимо включить к общему блоку DIV и добавить свойство display: table, которое позволяет задается элементу тип таблица. Код .wrap{ display: table; width: 100%; height: 100% } Далее необходимо у всех колонках добавить свойство display: table-cell, которое назначает элементу тип ячейки таблицы. К таблицам, созданным с помощью CSS, можно применять те же свойства, что и к обычным таблицам. Например, выравнивание верхнего края элемента по верху самого высокого элемента строки. Код .left, .right{ display: table-cell; vertical-align: top } Код HTML будет выглядеть приблизительно следующим образом: Код <div class="wrap"> <div class="left"> Содержимое левого блока </div> <div class="right"> Содержимое правого блока </div> </div> Если задействовать это решение, то у вас все колонки будут одинаковой высоты. Если все столбцы имеют одинаковый фон, одинаковая высота не имеет значения, поскольку вы можете установить этот фон для родительского элемента. Но если один или несколько столбцов должны иметь собственный фон, это становится очень важным для визуальной целостности дизайна. Хотя с другой стороны можно сделать эффекты под колонки на стилях. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |