- З чого вибрати або методи
- «Для ривка» або трохи теорії
- Метод «Float»
- Метод «Inline-block»
- Метод «Table»
Наша взаимовыгодная связь https://banwar.org/
Часто на практиці доводиться вирішувати задачу групування і вирівнювання контенту засобами CSS. Сьогодні ми розглянемо основні способи розміщення елементів в горизонтальний ряд.
Матеріал даної статті покликаний допомогти початківцям веб-дизайнерам в освоєнні прийомів верстки web-сторінок.
З чого вибрати або методи
Існує кілька способів розташування структурних елементів в ряд в горизонтальній площині. Найбільш корисними, з точки зору практичного застосування, є:
- метод «Float»
- метод «Inline-block»
- метод «Table-cell"
Кожен з них має свої переваги, області застосування і недоліки. Розглянемо їх по порядку.
«Для ривка» або трохи теорії
Всі структурні елементи HTML можна умовно розділити на:
Інлайновие (вбудовані) - типу img, span і їм подібні. У нас немає можливості змінювати їх фон і задавати їм довільні лінійні розміри.
Блокові - займають всю ширину батьківського блоку, завжди починаються з нового рядка - p, h, div.
Наочний приклад вбудованих і блокових структур наведено нижче:
Метод «Float»
Як вже відомо (див. Вище), блоковий елемент розміщується з нового рядка незалежно від заданої йому ширини (width). З цього, зменшуючи горизонтальний розмір div -а, в рядок блочки не збудувати.
Найбільш популярний (особливо серед початківців верстальників), метод вирішення це використання властивості float.
CSS властивість float знайшло велику популярність і практичну цінність після переходу від табличного способу верстки до блокового.
Float: left (right) трансформує блоковий елемент в плаваючий, вирівнює по лівому (правому) краю батьківського блоку і встановлює обтікання справа (зліва) текстом і іншими елементами.
Для прикладу, створимо чотири блоки, які потрібно розмістити в ряд:
<! DOCTYPE html> <html> <head> <meta charset = "utf-8"> <link rel = "stylesheet" media = "all" type = "text / css" href = "style.css" /> </ head > <body> <div class = "bblock"> Будуємо </ div> <div class = "bblock"> горизонтальний </ div> <div class = "bblock"> ряд </ div> <div class = "bblock" > з Дивов </ div> </ body> </ html>
І зовнішню таблицю стилів з наступним змістом:
div {float: left; / * Задаємо обтікання * / line -height: 120px; / * Висота рядка + верт. центрування тексту * / font -size: 40px; background: dodgerblue; color: white; margin -top: 60px; width: 320px; / * Фіксуємо ширину блоку * / margin -right: 10px; text -align: center; / * Центруючи текст по горизонталі * /}
В результаті отримуємо чотири блоки, розташовані в горизонтальний ряд і вирівняні по лівому краю батьківського блоку:
Іноді на практиці буває необхідно вирівняти блоки по правому краю батьківського елементу. Змінимо обтікання блоків в попередньому прикладі:
Зверніть увагу на написи, розташовані в блоках. На перший погляд може здатися, що приклад відпрацював криво. Але насправді, браузер обробив код правильно: прочитав блоки зверху вниз, і зробив те, що ми від нього просили - вирівняв по правому краю. Врахуйте цей момент при використанні властивості float: right.
Для того, щоб перервати обтікання елементів з якогось конкретного місця, використовуйте рядок:
<Div style = "clear: both;" > </ Div>
У розглянутому вище прикладі відстані між блоками ми задавали за допомогою відступу margin-right. Але що робити, якщо у вас при верстці сторінки постало завдання: розмістити блоки в ряд, центрувати їх, та й ще щоб відступи були тільки між ними, але ніяк не зовні?
Алгоритм дій наступний.
HTML:
<Div class = "wrap"> <! - Створюємо додаткову обгортку -родітельскій елемент -> <div class = "bblock"> Будуємо </ div> <div class = "bblock"> горизонтальний </ div> <div class = "bblock"> ряд </ div> <div class = "bblock"> з Дивов </ div> </ div>
CSS:
.wrap {width: 1310px; / * Фіксуємо ширину обгортки * / margin: 0 auto; / * Центруємо її * / background: darkgray; height: 120px; / * Задаємо висоту обгортки * /}. bblock {float: left; / * Задаємо обтікання * / line -height: 120px; / * Висота рядка + верт. центрування тексту * / font -size: 40px; background: dodgerblue; color: white; width: 320px; / * Фіксуємо ширину блоку * / margin -right: 10px; text -align: center; / * Центруючи текст по горизонталі * /}. wrap: last -child {margin -right: 0px; / * Прибираємо поле останнього div-а * /}
В результаті отримуємо таку картину:
Ну що ж, всіх практичних ситуацій не розгледиш, з цього перейдемо до загальних особливостей.
Важливо !!!
- Ширина блоків повинна бути фіксованою. Інакше отримаєте щось таке:
- При зменшенні розміру батьківського блоку або вікна веб-браузера, що не вміщаються блоки переміщаються вниз один під одного. Щоб виключити такий косяк, застосуєте властивість min-width.
- Не забувайте вказувати! DOCTYPE вашого документа, інакше, при відображенні сторінки в IE, застосувавши описаний вище метод горизонтального розміщення блоків, у вас з'явиться відступ справа порядку 17px (напевно розробники під скролл розмітили).
- Щоб уникнути відмінностей відображення сторінки в різних браузерах, деякі веб-майстри рекомендують задавати точні значення властивостей margin і padding для body.
- На відміну від методу «Inline-block» ви не зіткнетеся з наявністю зазору між блоками при відсутності margin-ів.
- Для завдання відступів і полів при розміщенні елементів скористайтеся властивостями margin і padding.
Метод «Inline-block»
Як малі так і блокові елементи мають свої переваги і недоліки в контексті кожної конкретної розв'язуваної задачі. А що якщо об'єднати їх переваги?
Зустрічайте, цвях програми - властивість display: inline-block.
display: inline-block генерує блочно-рядковий елемент, який по суті є рядковим, але зберігає блокові властивості - дозволяє змінювати лінійні розміри, задавати поля, відступи і т.д.
Блочно-рядковий елемент має такі властивості:
- висота і ширина блоку визначається автоматично по вмісту і значенням відступів (padding)
- висота і ширина блоку може бути задана фіксована
- Відсутнє ефект схлопування кордонів .
Розглянемо приклад створення простого навігаційного меню, що містить картинку і посилання.
HTML:
<Div class = "nav"> <p> <img src = "./vaden-pro-logo.png" alt = "" /> </ p> <p class = "string"> <a href = "# "> Посилання меню 1 довше звичайного </ a> </ p> </ div> <div class =" nav "> <p> <img src =" ./vaden-pro-logo.png "alt =" "/ > </ p> <p class = "string"> <a href = "#"> Посилання меню 2 </ a> </ p> </ div> <div class = "nav"> <p> <img src = "./vaden-pro-logo.png" alt = "" /> </ p> <p class = "string"> <a href = "#"> Посилання меню 3 </ a> </ p> < / div> <div class = "nav"> <p> <img src = "./vaden-pro-logo.png" alt = "" /> </ p> <p class = "string"> <a href = "#"> Посилання меню 4 </ a> </ p> </ div>
CSS:
.nav {display: inline -block; / * Задаємо блочно-рядкове відображення * / width: 180px; / * Задаємо ширину блоку * / background: dodgerblue; }. string {text -align: center; / * Дорівнювала текст по-горизонталі * /}
В результаті отримуємо таку менюшку:
Як бачимо, вийшло кривовато ... Але засмучуватися ми не маємо наміру, по-цьому застосовуємо до наших дівам CSS властивість vertical-align (докладніше див. Нижче):
Тепер наша навігаційна панель вирівнялася по верхній лінії:
Звичайно, наведений приклад є примітивним, але я впевнений, що на його основі ви зможете створити справжній шедевр !!!
Важливо !!!
- При зменшенні ширини вікна оглядача невмещающій елемент перемещаеться вниз (як у випадку float: left)
- Елемент, що відображається як inline-block чутливий до прогалин. Це призводить до того, що навіть при нульових значеннях margin між блоками буде зазор. Зазор цей залежить від застосовуваного шрифту. Для прикладу розглянемо список:
HTML:
<Ul> <li> Зазор </ li> <li> між </ li> <li> блоками </ li> </ ul>CSS:
li {display: inline -block; width: 180px; background: darkgrey; color: gold; line -height: 120px; font -size: 32px text -align: center; }
Результатом рендеринга такого коду буде наступна картина:
Є кілька способів прибрати зазори:
- підібрати негативні значення margin:
- вказати font-size: 0 для батьківського блоку і font-size ≠ 0 для інлайнового;
ul {font -size: 0px; } Li {font -size: 32px; } - не дуже красиво, але все ж ... Написати код в одну строчку
<Li> Зазор </ li> <li> між </ li> <li> блоками </ li>
Результатом застосування будь-якого з вище перерахованих прийомів буде наступна структура:
- підібрати негативні значення margin:
- Якщо у вас кілька блочно-малих елементів поспіль мають різну висоту, то їм необхідно поставити властивість vertical-align: top. Нагадаю, що за замовчуванням vertical-align присвоєно значення baseline.
- Кросбраузерну.
- Для древніх версій Firefox додаємо рядок:
display: - moz -inline -stack;
і обертаємо елемент в додаткову div-обгортку. - IE 7 і більш ранні версії - додаємо рядки:
zoom: 1; / * Задаємо hasLayout * / * display: inline; / * Зірочка - хак для IE * / _height: 250px; / * В IE6 не працює min-height * / - Зауважу, що на зазначені рядки вибірково реагують конкретні браузери (на першу - Firefox, на інші - IE).
Метод «Table»
Табличний підхід довгий час був стандартом верстки, що в першу чергу пояснювалося простотою і інтуїтивної зрозумілістю розмітки. Швидше за все, саме це і послужило причиною появи табличного форматування в CSS.
Властивості display: table (table-cell, inline-table), дозволяють виконувати табличное форматування елементів без застосування HTML таблиць.
Для горизонтального розміщення блоків нам знадобиться батьківський елемент, який має властивість display: table, і дочірні елементи (комірки), що мають властивість display: table-cell:
<Div class = "wrap"> <div class = "bblock"> Будуємо </ div> <div class = "bblock"> табличний </ div> <div class = "bblock"> ряд </ div> <div class = "bblock"> з Дивов </ div> </ div> .bblock {display: table -cell; font -size: 32px; width: 200px; height: 200px; background: gold; text -align: center; vertical -align: middle; }. wrap {display: table; border -spacing: 20px 20px; background -color: darkgray; }
Важливо !!!
- На відміну від методів «Inline-block» і «float», при зменшенні ширини вікна веб-браузера, осередки не переміщаються вниз.
- У вас немає можливості задавати властивість margin для осередків псевдотабліци.
- Кросбраузерну. Властивості з сімейства display: table * не підтримуються IE6, IE7. Крім того, в IE8 ви можете спостерігати динамічну помилку рендеринга псевдотаблічних елементів у вигляді рандомно пропадають осередків. Дана помилка найчастіше проявляється при первинній промальовуванні документа
.
Оцінок: 32 (середня 4.5 out of 5)
Але що робити, якщо у вас при верстці сторінки постало завдання: розмістити блоки в ряд, центрувати їх, та й ще щоб відступи були тільки між ними, але ніяк не зовні?А що якщо об'єднати їх переваги?
Наша взаимовыгодная связь https://banwar.org/. Запустив новый сайт, "Пари Матч" обещает своим клиентам незабываемый опыт и возможность выиграть крупные суммы.
