Як зробити з допомогою css блоки в лінію?

34

Від автора: я вітаю вас. Необхідність представити кілька блоків на веб-сторінці в одну лінію — дуже часта завдання, яке постає перед верстальниками. Вона виникає при верстці практично кожного шаблону, тому всім нам у будь-якому випадку потрібно знати і застосовувати основні способи зміни поведінки блоків.

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

Основні способи вибудувати в css блоки в ряд

Ми не будемо нічого ускладнювати, є 3 основних способи:

Перетворити блоки на малі елементи. При цьому блокові властивості втрачаються, тому цей варіант практично ніколи не використовується

Зробити потрібні елементи блочно-малими. Це спеціальний тип, при якому елемент зберігає свої властивості, але у той же час дозволяє іншим блокам розташуватися поряд.

Зробити елементи плаваючими з допомогою властивості float.

На цих варіантах зупинимося. Флексбокс, табличне відображення і інші моменти розглядати не будемо. Отже, нехай у нас є 3 підзаголовка.

Заголовок 1

Заголовок 2

Заголовок 3

Природно, всі css-властивості потрібно прописувати в окремому файлі (style.css), який потрібно підключити до html-документа. В цей файл я запишу мінімальний стиль, щоб просто було видно наші підзаголовки.

h3{
background: #EEDDCD;
}

Ось вони на сторінці:

Є вони ведуть себе як блоки. Кадый розташовується на своєму рядку, між ними є відступи. При бажанні ви можете поставити які-завгодно внутрішні відступи і взагалі зробити що завгодно.

Перетворимо в рядки і відразу додамо внутрішні відступи. Для цього селектору h3 потрібно додати такі властивості:

display: inline;
padding: 30px;

Як бачите, відступи застосувались не зовсім коректно, це як раз тому, що ми маємо справу з рядками. Якщо змінити відображення на блочно-рядкове, відступи додадуться коректно. Для цього всього лише змінюємо значення властивості:

display: inline-block;

Є 2 основні проблеми, які виникають при використанні цього прийому. Перша — це мінімальний відступ. Утворюється він з-за того, що в коді між блоками є один пробіл, який і утворює цей відступ. Якщо ця проблема потребує вирішення, є 2 основних варіанти:

В html розташувати код потрібних блоків в одну лінію без пробілів

Проставити негативний зовнішній відступ праворуч -4 пікселя. Саме стільки займає один пробіл.

Друга проблема — при різній висоті елементів можуть виникати проблеми з відображенням. Загалом, найкращий варіант — плаваючі блоки. Замість display: inline-block пишемо ось що:

float: left;

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

Єдине, за чим ви повинні стежити в такому разі — скасування обтікання. Наступного блоку після плаваючих потрібно поставити властивість clear:both, щоб він не намагався обходити ці блоки, а розташувався нижче, як і належить.

Блоки в лінію з використанням фреймворку

Відразу скажу, що якщо ви збираєтеся використовувати будь-який нормальний css-фреймворк (наприклад, Bootstrap) то там все ще набагато простіше. Весь css-код, що відповідає за розстановку елементів, вже написаний і вам залишиться лише задано правильні класи. Для цього достатньо вивчити систему сітки, і ви зможете робити многоколоночные адаптивні шаблони без особливих труднощів. Принаймні, це буде значно простіше, ніж при написанні css з нуля.

Ще одна проблема написання коду з нуля виникає як раз коли вам потрібен адаптивний дизайн. Звичайно, його можна реалізувати самостійно, володіючи медіа-запитами, але це буде набагато складніше, якщо у вас складний шаблон.

Наприклад, коли у вас на великих екранах повинно бути 4 колонки, на середніх — 3, а на мобільних телефонах — 2. З допомогою таких фреймворків, як Bootstrap, а точніше з його допомогою сітки, реалізувати подібне — справа буквально декількох хвилин.

Плавно переводячи тему на фреймворк Bootstrap, в черговий раз зазначу, що якщо перед вами стоїть завдання створити складний адаптивний шаблон, то просто гріх не скористатися сіткою. Для цього навіть не обов’язково підключати повну версію фреймворку – його можна кастомизировать і зупинити там тільки те, що дійсно вам потрібно.

Навчитися працювати з фреймворком ви зможете за допомогою нашого платного курсу. Там пояснюється і теорія, але найголовніше – є практика. Ви сверстаете 3 адаптивних шаблону і отримаєте чудовий досвід, який дозволить верстати сайти на замовлення або для себе. А якщо ви хочете безкоштовно ознайомитися з перевагами і можливостями фреймворку, пропоную вам переглянути нашу серію статей з Bootstrap, а також безкоштовний міні-курс з верстки простого макета. Бажаю вам успіхів у верстці і сайтобудуванні в цілому.