Методи горизонтального розміщення блоків на сторінці

Методи горизонтального та вертикального розміщення блоків на сторінці

Існує кілька способів розташування структурних елементів в ряд в горизонтальній площині. Найбільш корисними, з точки зору практичного застосування, є:

метод «Float»
метод «Inline-block»
метод «Table-cell"

Кожен з них має свої переваги, області застосування і недоліки.

Всі структурні елементи HTML можна умовно розділити на:

Інлайнові (вбудовані) - типу img, span і їм подібні. У них не можна змінювати фон і задавати їм довільні лінійні розміри.
Блокові - займають всю ширину батьківського блоку, завжди починаються з нового рядка - p, h, div.

Метод «Float»

Як вже відомо, блоковий елемент розміщується з нового рядка незалежно від заданої йому ширини (width). Для розміщення блоків горизонтально можна застосувати властивість float.

Властивість float використовується для позиціонування та компонування на веб-сторінках.

Властивість float може мати одне з наступних значень:

left - Елемент плаває зліва від контейнера
right - Елемент плаває праворуч від контейнера
none - Елемент не плаває (буде відображатися тільки там, де це відбувається в тексті). Це значення за замовчуванням
inherit - Елемент успадковує значення float батьківського елемента

При створенні макета веб-сторінок потрібно завжди буде вибудовувати блокові області поруч одна з одною (наприклад, область лівої колонки, область з контентом і правої колонки). Звичайні блоки в CSS розташовуються один під одним.

Щоб розташувати блокт горизонтально, потрібно застосувати властивість Float: left (right)

See the Pen div-float-left by kravets (@raisa69) on CodePen.

Для того, щоб перервати обтікання елементів з якогось конкретного місця, потрібно застосувати властивість :

Властивість Clear

Властивість clear вказує, які елементи можуть плавати поруч з очищеним елементом і з якого боку.

Властивість clear може мати одне з наступних значень:

none - Дозволяє використовувати плаваючі елементи з обох сторін. Це значення за замовчуванням
left - З лівого боку не допускаються плаваючі елементи
right- З правого сторони не дозволені плаваючі елементи
both - Плаваючі елементи не дозволені ні зліва, ні справа
inherit - елемент успадковує значення Clear батьківського елемента

Найбільш поширеним способом використання властивості clear є використання float властивості елемента.

Якщо елемент плаває вліво, то очищати теж треба вліво.

Плаваючий елемент буде продовжувати плавати, але очищений елемент буде відображатися під ним на веб-сторінці.

Якщо наближчому блоку до обтічного елемента не вистачає місця по ширині, то він переноситься на наступний рядок. Це добре помітно на блоках, загальна ширина яких перевищує 100%:

See the Pen float: left>width 100% by kravets (@raisa69) on CodePen.

Приклад розташування блоків горизонтально методом float:

See the Pen div-float: left by kravets (@raisa69) on CodePen.

Приклад реалізації горизонтального меню методом float:

See the Pen nav-li-float by kravets (@raisa69) on CodePen.

Приклад реалізації горизонтального меню методом float:

See the Pen nav-li-float2 by kravets (@raisa69) on CodePen.

Приклад реалізації горизонтального меню методом float:

See the Pen nav-li-float3 by kravets (@raisa69) on CodePen.

Метод «Inline-block»

display: inline-block генерує блочно-рядковий елемент, який по суті є рядковим, але зберігає блокові властивості - дозволяє змінювати лінійні розміри, задавати поля, відступи і т.д.

Блочно-рядковий елемент має такі властивості:

висота і ширина блоку визначається автоматично по вмісту і значенням відступів (padding)
висота і ширина блоку може бути задана фіксована
Відсутній ефект схлопування кордонів

Одним з поширених застосувань display: inline-block є створення горизонтальних навігаційних посилань (меню сайту):

See the Pen li-display-inline-block by kravets (@raisa69) on CodePen.

Є декілька способів прибрати відступи між елементами:

подібрати відємні значення margin:
```
margin-right: -4px;
```
вказати font-size: 0 для батьківського блока і font-size ≠0 для інлайнового;
```
        ul { font-size: 0px;}
        li {font-size: 32px;}
```

… Написати код в один рядок

<li>Відступи</li><li>між</li><li>блоками</li>

Приклад реалізації горизонтального меню методом inline-block

See the Pen nav-li-display: inline-block2 by kravets (@raisa69) on CodePen.

Приклад застосування методу inline-block до блоків div:

See the Pen div-display: inline-block by kravets (@raisa69) on CodePen.

Приклад застосування методу inline-block до блоків div:

See the Pen div-display:inline-block by kravets (@raisa69) on CodePen.

Метод «Table»

Табличний підхід довгий час був стандартом верстки, що в першу чергу пояснювалося простотою і інтуїтивною зрозумілістю розмітки. Швидше за все, саме це і послужило причиною появи табличного форматування в CSS.

Властивості display: table (table-cell, inline-table), дозволяють виконувати табличне форматування елементів без застосування HTML таблиць.

Для горизонтального розміщення блоків потрібен батьківський елемент, який має властивість display: table, і дочірні елементи (комірки), що мають властивість display: table-cell:

See the Pen div-display: table-cell by kravets (@raisa69) on CodePen.