В настоящее время табличная вёрстка встречается очень редко – она устарела так же, как и Internet Explorer 6. Вместо неё используется блочная, которая имеет больше возможностей и в ряде случаев проще. Но у блочной вёрстки есть своя проблема – сложно выровнять блоки по высоте, сделав их одинаковыми, что очень просто достигается при использовании таблиц.
В сети описано много способов, как этого добиться, но почти все они имеют недостатки – нужно либо использовать jQuery с плагинами, либо заранее устанавливать для блоков высоту с запасом.
В то же время есть более простой способ сделать это, причём работающий во всех современных браузерах. Важным моментов является возможность сделать это исключительно средствами HTML и CSS, не прибегая к помощи скриптов. Также отдельно отмечу, что этот способ работает не только в современных версиях Firefox и Google Chrome, но и в Internet Explorer 11 и даже в старой Opera 12.17.
Этот метод выравнивания блоков использует свойство display, позволяющее элементам страницы вести себя так, будто на самом деле они являются чем-то другим. В частности, в данном примере мы заставим блоки вести себя так, будто они являются таблицами. Итак, к делу.
В первую очередь создадим блок-обёртку, а в нём ещё три для столбцов. Сразу присвоим им классы:
<div class="col-container">
<div class="col1">Текст для первого блока</div>
<div class="col2">Текст для второго блока</div>
<div class="col3">Текст для третьего блока</div>
</div>
Для контейнера в стиле устанавливаем ширину, отступы и способ отображения:
.col-container {
display: table;
width: 1200px;
margin: 6px auto 0px auto;
}
Для вложенных в него элементов задаём способ отображения и отступы от границ блока до текста:
.col-container > div {
display: table-cell;
padding: 8px;
}
Для стилей col1, col2 и col3 задаём только ширину (в моём примере – 20%, 60% и 20%) и цвет фона.
В результате имеем расположенные по горизонтали три блока, которые имеют одинаковую высоту, установленную по наибольшему из них.
Также этот способ решает ещё одну задачу – часто на сайтах боковые колонки на определённых страницах не отображаются. Если для центрального блока указать ширину как auto, то она станет «резиновой», меняя свою ширину в зависимости от наличия боковых колонок.
Скачать готовый файл можно у меня на сайте.
Comments: