Несколько способов верстки колонок

Январь 22, 2012 ||  css , layout ||  комментарии

Метод float

Не знаю как его назвать, пусть будет метод float.

<div class="grid">
    <div class="col"></div>
    <div class="col"></div>
</div>

grid – контейнер колонок, одновременно это решение проблемы схлопывания. col – колонка.

*{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.grid {
    zoom: 1;
    margin:0 0 0 -2.083%;
    list-style:none;
}

.grid:before,
.grid:after {
    content: "";
    display: table;
}
.grid:after {
    clear: both;
}

.grid>[class^="col-"]{
    float: left;
    margin:0 0 0 2.083%;
    padding: 0 10px;
}

.ie7 .grid>[class^="col-"]{
    margin:0 0 0 2.079%;
    display: inline;
    padding: 0;
}

Хорошо известный способ, единственное о чем стоит сказать это о способе избавления от класса last в последней колонке.

У gridесть левый отрицательный маржин: – 2.083%, такое значение не важно, в данном случае это 20px от ширины грида в 960px. Отрицательный маржин приводит к тому что сумма ширин вложенных элементов будет 102.083% и плюс колонка будет выступать слева на эту величину. Значит можно просто каждой колонке присвоить отступ такой же слева без всяких last, и маржин у первой колонки утопиться в этот наружный выступ.

пример

Колонки инлайновыми блоками

<div class="grid-inline">
    <div class="col"></div>
    <div class="col"></div>
</div>
.grid-inline {
    letter-spacing: -.31em;
    word-spacing: -.43em;
    position: relative; }

.grid-inline .col {
    display: inline-block;
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;}

.ie7 .grid-inline .col { 
    display: inline; }

пример

Проблема с инлайновыми блоками в том что между ними есть зазор величиной с пробел текущего шрифта, аналогично пробелу между словами, поэтому при помощи letter-spacing: -.31em;этот пробел обнуляется. Возможным минусом этого метода может быть то, что у какого-то шрифта этот пробел не будет равным 0.31em, но в любом случае можно либо подобрать нужное значение либо для грида использовать какой то другой шрифт.

word-spacing: -.43em; – это тоже лечение только для Opera.

Плюс этого метода в том что не надо бороться с обрыванием float.

Минус в том что обнуление зазора выглядит как то не надежно, ну что это за цифра “магическая” -0,31.

И преджде чем применять этот метод стоит почитать вот это.

На мой взгляд метод все равно интересный, я пока применяю его без использования отрицательных letter-spacing и letter-spacing, а просто делаю сумму ширин блоков меньше 100% и с запасом. Уж больно мне не нравится гемор с обрыванием float.

Метод Чикуенка

Не знаю насколько этот метод правомочно называть методом Чикуенка ), но впервые я прочел о нем в его статье Вёрстка растягивающихся сайтов. Понял я его не сразу и пришлось какое то время чесать репу и экспериментировать, и хотя я его не использую часто но он очень интересный и решает кое какие проблемы. Обьяснять его я не буду, лучше всего для этого почитать его в оригинале, тем более что в нем есть важные детали которые надо понять прежде чем использовать. Приведу только кратко пример.

<div class="page grid">
    <div class="col content"></div>
    <div class="col leftbar"></div>
    <div class="col rightbar"></div>
</div>
.col {
    float: left;
    position: relative;
    margin-right: -100%; }

.page {
    width: 50%;
    margin: auto; }

.content { 
    width: 100%; }

.leftbar {
    width: 40%;
    left: -40%; }

.rightbar {
    width: 40%;
    left: 100%; }

.ie7 .content,
.ie7 .leftbar,
.ie7 .rightbar {
    padding: 0px;
    border: 0; }

пример

Главное тут, на что надо обратить внимание для того чтобы понять, это стили col. float: left – “вынимает” блок из потока. margin-right: -100% – “затягивает” соседний блок так что он оказывается в “нуле” относительно родительского блока. А дальше из этой точки блоки расставляются в нужное место свойством left.

Плюсы этого метода очевидные – во первых можно расставлять блоки в любой последовательности, и во вторых, что иногда очень важно – удаление любой колонки не затрагивает поведение других

Это не все прелести метода, остальное стоит почитать в оригинальной статье.

Имитация абсолютного позиционирования

Нечто похожее на предыдущий метод но с той разницей что изначально блоки ставятся в правый верхний угол а потом возвращаются на свои места. Этот метод подробно описан в статье Faux Absolute Positioning.

<div class="grid">
    <div class="content col"></div>
    <div class="leftbar col"></div>
    <div class="rightbar col"></div>
</div>
.col {
    float: left;
    position: relative;
    left: 100%; }

.content {
    margin-left: -80%;
    width: 56%;
    padding: 2%; }

.leftbar {
    width: 16%;
    padding: 2%;
    margin-left: -100%; }

.rightbar {
    width: 16%;
    padding: 2%;
    margin-left: -20%; }

пример пример пример пример

Проблема с этим способом та же что и с предыдущим – зазоры между колонками которые появляются из за округления процентных значений. Зазоров нет только в Firefox.

Решается это созданием дополнительной обертки для контейнера колонок

comments powered by Disqus