Убедитесь, что ваши колонки не «схлопываются» по горизонтали

2014-01-16

Возможно, вы знакомы с элементами, которые ломают верстку по вертикали. Если какой-либо элемент включает в себя другие float-элементы, то он получит нулевую высоту.

Для решения этой проблемы часто используется прием «clear fix». Но если элемент не содержит в себе никаких других элементов, то он может рухнуть и по горизонтали, что, разумеется, печально скажется на внешнем виде разметки.

Ниже приведен пример трехколоночной HTML-разметки:

<div class="grid grid-bad">
   <div class="col col-1-3"></div>
   <div class="col col-1-3"></div>
   <div class="col col-1-3">
     Я первая колонка.
   </div>
 </div>

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

.col {
   float: left; 
} 
.col-1-3 {
   width: 33.33% 
}

Теоретически, в результате написания этих стилевых правил получится нечто вроде этого:

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

Последняя же колонка, так как она имеет внутри себя текст, получит ширину, равную ширине контента, однако сдвинется влево, так как первые две колонки не имеют размеров.

Когда это может произойти?

Я, совсем недавно, попал в ситуацию, когда контент в столбцы загружался через Ajax. Пока не был вызван Ajax и столбцы не получили содержимого, они не имели размеров и, соответственно были схлопнуты по ширине и высоте.

Когда же они наполнились контентом, то все колонки раздвинулись на нужные расстояния. ЧРЕЗВЫЧАЙНО НЕУДОБНО!

Конечно, у вас такой ситуации может и не возникнуть. Возможно, ваши колонки всегда имеют какое-то содержимое. Тогда данная статья не для вас.

Однако если вы создаёте фреймворк для системы сеток (даже для собственных нужд), то стоит уделить внимание этой маленькой, но очень важной проблеме.

Как это исправить?

Столбцам нужно добавить стиль, который задает им минимальную высоту в 1px. В этом случае, схлопывания по ширине происходить не будет.

Иногда, у столбцов имеются отступы, которые также работают. Если у столбца есть отступ сверху или снизу, либо верхняя или нижняя граница, то все будет хорошо. Если же этого нет, то задайте свойство min-height.

/* Любое из этих правил с положительным значением будет работать */
  .col {
   border-top: 1px solid white;
   border-bottom: 1px solid white;
   padding-top: 1rem;
   padding-bottom: 1rem;
   min-height: 1px;
}

Ах да, не забывайте про наличие эффекта схлопывания при создании фреймворков для систем сеток.