От автора: Вы, возможно, знакомы со сворачиванием элементов по вертикали. Если в нем содержатся только «плавающие» элементы, то родительский элемент свернется до нулевой высоты. Для этого мы часто применяем clear fix. Но если в элементе ничего не содержится, он также может свернуться по горизонтали, что окажется для разметки весьма затруднительно.
Вот пример HTML разметки из трех колонок.
|
1 2 3 4 5 6 7 |
<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"> I'm the last column. </div> </div> |
Плавающие элементы все еще остаются, возможно, самым практичным способом управления колонками. Можно было бы применить по-настоящему простую систему сеток, как здесь:
|
1 2 3 4 5 6 |
.col { float: left; } .col-1-3 { width: 33.33% } |
Если вы похожи на меня, то у вас может получиться умозрительная модель чего-то вроде этого:
Однако вы можете удивиться. Так как первые две колонки пустые и ничто не создает их высоту, они сворачиваются по горизонтали. Последняя колонка, так как в ней содержится некий контент, признает его ширину, но окажется далеко слева, так как две колонки перед ней свернулись.
Когда это происходит
Я недавно наткнулся на это в ситуации, где содержимое колонки загружалось с помощью Ajax. Иначе колонка ничего не содержала, поэтому пока вызов Ajax происходил удачно и содержимое добавлялось, она свертывалась по ширине. Когда контент приходил, он сдвигал все следующие колонки вправо. Некрасиво.
У вас это могло не произойти никогда. Возможно, ваши колонки всегда содержат некий контент. Тогда не велика важность. Но если вы делаете сеточный каркас, даже для себя, то должны учитывать подобный сценарий.
Как исправить
Колонкам нужно что-то для создания высоты хотя бы в 1px. При этом они не станут сворачиваться по ширине. Иногда у колонок есть отступ, это хорошо срабатывает. Если у колонки есть верхний или нижний отступ или верхняя или нижняя рамки, то все в порядке. Если нет ничего, можно просто установить min-height.
|
1 2 3 4 5 6 7 |
.col { border-top: 1px solid white; border-bottom: 1px solid white; padding-top: 1rem; padding-bottom: 1rem; min-height: 1px; } |
Да, не слишком обычно, но если вы делаете систему сеток, то для предотвращения свертывания можно что-то разместить в ней.
Автор: Chris Coyier
Источник: //css-tricks.com/
Редакция: Команда webformyself.
