Як зробити в css блоки в лінію? Основні способи

1. Основні способи вибудувати в css блоки в ряд
2. Блоки в лінію з використанням фреймворку

Наша взаимовыгодная связь https://banwar.org/

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

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

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

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

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

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

Практичний курс по верстці адаптивного сайту з нуля!

Вивчіть курс і дізнайтеся, як верстати сучасні сайти на HTML5 та CSS3

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

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

<H3> Заголовок 1 </ h3>

<H3> Заголовок 2 </ h3>

<H3> Заголовок 3 </ h3>

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

h3 {

background: #EEDDCD;

}

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

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

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

display: inline;

padding: 30px;

Практичний курс по верстці адаптивного сайту з нуля!

Вивчіть курс і дізнайтеся, як верстати сучасні сайти на HTML5 та CSS3

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

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

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

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

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

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

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

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

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

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

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

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

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

Практичний курс по верстці адаптивного сайту з нуля!

Вивчіть курс і дізнайтеся, як верстати сучасні сайти на HTML5 та CSS3