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

Метод float

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

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

grid – контейнер колонок, одновременно это решение проблемы схлопывания, contain float
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.

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

Tags:

Комментировать