Переконайтеся, що ваші колонки не згортаються по горизонталі

12

Від автора: можливо, Ви знайомі зі згортанням елементів по вертикалі. Якщо в ньому містяться тільки «плаваючі» елементи, то батьківський елемент згорнеться до нульової висоти. Для цього ми часто застосовуємо clear fix. Але якщо в елементі нічого не міститься, він також може згорнутися по горизонталі, що виявиться для розмітки досить важко.

Ось приклад HTML розмітки з трьох колонок.

I’m the last column.

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

.київ {
float: left;
}
.col-1-3 {
width: 33.33%
}

Якщо ви схожі на мене, то у вас може вийти умоглядна модель чогось на зразок цього:

Переконайтеся, що ваші колонки не згортаються по горизонталі

Однак ви можете здивуватися. Так як перші дві колонки порожні і ніщо не створює їх висоту, вони згортаються по горизонталі. Остання колонка, так як в ній міститься якийсь контент, визнає його ширину, але виявиться далеко ліворуч, так як дві колонки перед нею згорнулися.

Переконайтеся, що ваші колонки не згортаються по горизонталі

Коли це відбувається

Я недавно натрапив на це в ситуації, де вміст колонки завантажувався з допомогою Ajax. Інакше колонка нічого не містила, тому поки виклик Ajax походив вдало і вміст додавалося, вона згорталася по ширині. Коли контент приходив, він зсував всі наступні колонки праворуч. Негарно.

У вас це могло не відбутися ніколи. Можливо, ваші колонки завжди містять певний контент. Тоді не велика важливість. Але якщо ви робите сітковий каркас, навіть для себе, то повинні враховувати подібний сценарій.

Як виправити

Колонкам потрібно щось для створення висоти хоча б в 1px. При цьому вони не стануть згортатися по ширині. Іноді у колонок є відступ, це добре спрацьовує. Якщо у колонки є верхній або нижній відступ або верхня або нижня межі, то все в порядку. Якщо немає нічого, можна просто встановити min-height.

.київ {
border-top: 1px solid white;
border-bottom: 1px solid white;
padding-top: 1rem;
padding-bottom: 1rem;
min-height: 1px;
}

Так, не надто звичайно, але якщо ви робите систему сіток, то для запобігання згортання можна розмістити в ній.