Горизонтальное выравнивание блочных элементов

FRUTALITY · October 29, 2013

Здравствуйте.

Вот уже несколько лет верстаю разной степени сложности страницы и изучаю различные приемы и методы.

Но до сих пор не нашел для себя действительно удобного, идеального метода выравнивания блочных элементов по горизонтали.

О чем, собственно, речь.

Есть какой-то макет с кучей элементов. И некоторые элементы надо расположить на одной линии по горизонтали, вписав в какой-нибудь фиксированный контейнер.

Итак, какие есть способы сверстать такой "макет"?

1. Старые добрые таблицы.

Думаю, не нужно объяснять, что "таблицы для табличных данных", и вообще, поддерживать более-менее сложный макет, сверстанный таблицами — очень муторно.

2. Способ классический. Использовать float: left/right.

Код:

<!doctype html>
<html>
<head>
<title>Способ классический: float</title>
<meta http-equiv='content-type' content='text/html; charset=utf-8'>
<style>
	 #container{
	 border:1px solid #c3c3c3;
	 padding:40px 0;
	 width:400px;
	 }

	 .block{
	 background:#c3c3c3;
	 float:left;
	 text-align:center;
	 }

	 #block-1{
	 margin:0 16px 0 15px;
	 width:99px;
	 }

	 #block-2{
	 margin-right:16px;
	 width:59px;
	 }

	 #block-3{
	 width:180px;
	 }
</style>
</head>
<body>
<section id='container'>
	 <div class='block' id='block-1'>1</div>
	 <div class='block' id='block-2'>2</div>
	 <div class='block' id='block-3'>3</div>
</section>
</body>
</html>

Плюсы: кроссбраузерно.

Минусы:

если нужно вставить элемент ниже, то нужно применять clear:both. А когда макет действительно сложный, становится слишком много усложнений - конструкция превращается в монструозную.
если высота элементов не фиксированная, то в достаточно типичных макетах случаются разные неприятности (http://habrahabr.ru/post/117109/ - 3 абзац)

3. "Все правильные ребята уже давно прочитали статью в блоге Мозиллы" (с) Сергей Чикуёнок. Речь о display: inline-block, конечно же.

Способ почти идеальный. Если честно, я предпочитаю именно его, но тут есть свои заморочки. Блок, отмеченный как inline-block, ведет себя как блочный, но если ему указать ширину, то спокойно встает в одну линию с другими элементами.

Перепишу стили для примера выше (разметку не трогаю):

<!doctype html>
<html>
<head>
<title>Способ правильный: inline-block</title>
<meta http-equiv='content-type' content='text/html; charset=utf-8'>
<style>
	 #container{
	 border:1px solid #c3c3c3;
	 padding:40px 0;
	 width:400px;
	 }

	 .block{
	 background:#c3c3c3;
	 /*float:left; Это убрали */
	 display:inline-block; /* Это добавили */
	 text-align:center;
	 }

	 #block-1{
	 margin:0 16px 0 15px;
	 width:99px;
	 }

	 #block-2{
	 margin-right:16px;
	 width:59px;
	 }

	 #block-3{
	 width:180px;
	 }
</style>
</head>
<body>
<section id='container'>
	 <div class='block' id='block-1'>1</div>
	 <div class='block' id='block-2'>2</div>
	 <div class='block' id='block-3'>3</div>
</section>
</body>
</html>

Взгляните на скриншот, что у нас получилось:

(Я использую Firebug для подсветки элементов на странице)

Обратите внимание на зеленые стрелки: первая указывает на зазор в 4 пикселя между inline-block-элементами. Вторая указывает на последствие - из-за этих зазоров уменьшилось расстояние до правой границы контейнера.

А если бы контейнер был более узким, то элемент "3" был бы перенесен на следующую линию, несмотря на то, что ширина элементов не менялась.

Как с этим бороться:

1. Достаточно "вытянуть" в одну строку html-код элементов 1-3 (зазор пропадет)

2. Либо прописывать font-size:0 для контейнера и font-size:%ваше значение% для блоков 1-3

3. Либо использовать для блоков 1-3 margin-right: -0.3em

4. Либо еще какой-нибудь костыль (полный список в комментариях здесь: http://chikuyonok.ru...vertical-align/)

5. Либо "подгонять" margin-ы между элементами.

Итак, плюсы: довольно изящное решение, все максимально понятно

Минусы: без вытягивания кода или использования костылей отображается браузерами не так, как хотелось бы.

4. Абсолютное позиционирование.

Вся соль в использовании position:absolute. Перепишу все тот же несчастный пример (разметку снова не трогаем, меняется только CSS):

<!doctype html>
<html>
<head>
<title>Способ pixel-perfect: position:absolute</title>
<meta http-equiv='content-type' content='text/html; charset=utf-8'>
<style>
	 #container{
	 border:1px solid #c3c3c3;
	 padding:40px 0;
	 position:relative; /* Добавили */
	 width:400px;
	 }

	 .block{
	 background:#c3c3c3;
	 /*float:left; Это убрали */
	 /*display:inline-block; Это тоже убрали */
	 position:absolute; /* Добавили */
	 text-align:center;
	 }

	 #block-1{
	 /*margin:0 16px 0 15px; Убрали */
	 left:15px; /* Добавили */
	 width:99px;
	 }

	 #block-2{
	 /*margin-right:16px; Убрали */
	 left:130px; /* Добавили */
	 width:59px;
	 }

	 #block-3{
	 left:205px; /* Добавили */
	 width:180px;
	 }
</style>
</head>
<body>
<section id='container'>
	 <div class='block' id='block-1'>1</div>
	 <div class='block' id='block-2'>2</div>
	 <div class='block' id='block-3'>3</div>
</section>
</body>
</html>

На этот раз, изменений больше. Способ работает совсем идеально. С точностью до пикселя.

Плюсы: получено именно то, чего хотелось, и без костылей.

Минусы:

без калькулятора не обойтись - на любое изменение одного блока нужно менять и все остальные.
элементы страницы ведут себя так, будто абсолютно позиционированных элементов на странице нет, и это иногда не очень классно.

5. Способ прогрессивный. Верстка по настоящей сетке с использованием display:grid.

Снова поменяю пример:

<!doctype html>
<html>
<head>
<title>Способ прогрессивный: display:grid</title>
<meta http-equiv='content-type' content='text/html; charset=utf-8'>
<style>
	 #container{
	 border:1px solid #c3c3c3;
	 display:-ms-grid; /* Добавили */
	 -ms-grid-columns:15px 99px 16px 59px 16px 180px; /* Добавили */
	 padding:40px 0;
	 /*position:relative; Убрали */
	 width:400px;
	 }

	 .block{
	 background:#c3c3c3;
	 /*float:left; Это убрали */
	 /*display:inline-block; Это тоже убрали */
	 /*position:absolute; Убрали */
	 text-align:center;
	 }

	 #block-1{
	 /*margin:0 16px 0 15px; Убрали */
	 /*left:15px; Убрали */
	 -ms-grid-column:2; /* Добавили */
	 width:99px;
	 }

	 #block-2{
	 /*margin-right:16px; Убрали */
	 /*left:130px; Убрали */
	 -ms-grid-column:4; /* Добавили */
	 width:59px;
	 }

	 #block-3{
	 /*left:205px; Убрали */
	 -ms-grid-column:6; /* Добавили */
	 width:180px;
	 }
</style>
</head>
<body>
<section id='container'>
	 <div class='block' id='block-1'>1</div>
	 <div class='block' id='block-2'>2</div>
	 <div class='block' id='block-3'>3</div>
</section>
</body>
</html>

Вот он, способ моей мечты. Подробно можно почитать на Хабре (http://habrahabr.ru/...ft/blog/140715/). Если вкратце: описываем контейнер как сетку. Каждому элементу назначаем место в этой сетке. И все классно.

Но есть существенные минусы:

в чистом виде, без префиксов, не работает вообще ни в одном браузере (это еще не стандарт, только черновик)
с префиксами работает только в IE 10 и выше

Пока что этот способ - в мечтах. Можно, конечно, использовать JS-библиотеки, реализующие поддержку Grid в браузерах (например, http://ecsstender.org/), но это тоже не очень классное решение.

Теперь, внимание, знатоки. Что используете вы? Есть ли изящные решения без замусоривания кода? Предлагаю обсудить данный вопрос.

Edited October 29, 2013 by FRUTALITY

wwt · October 29, 2013

1. Старые добрые таблицы. Думаю, не нужно объяснять, что "таблицы для табличных данных", и вообще, поддерживать более-менее сложный макет, сверстанный таблицами — очень муторно.

display: table;

UPD можете добавить в голосование. Даже странно про inline-block вы написали, а про table нет.

Edited October 29, 2013 by wwt

SelenIT · October 29, 2013

6. (уже упомянули) «Не очень старые не очень добрые CSS-таблицы», в смысле display:table для контейнера и display:table-cell для элементов (плюсы те же, что у нормальных таблиц, но без ущерба для семантики, стандартный CSS2.1, главный минус — неподдержка в IE7-).

7. Модные, но с непростой судьбой флексбоксы (плюсы: специально разработаны для этой задачи, поддерживаются в том или ином виде во всех браузерах, кроме IE9- и Оперы-мини, минусы: в разных браузерах поддерживаются очень разные версии спеки, нужен зоопарк префиксов и разных синтаксисов, реализация старой спеки достаточно тормозная).

Блок, отмеченный как inline-block, ведет себя как блочный, но если ему указать ширину, то спокойно встает в одну линию с другими элементами.

Немного не так. Такой блок внутри ведет себя как обычный блок, причем с отдельным контекстом форматирования (из него не выпадают float-ы и margin-ы потомков), но сам снаружи живет в инлайновом контексте, т.е. ведет себя как слово или картинка в тексте, подчиняясь св-вам text-align, vertical-align и т.п. Поэтому и пробелы между тегами для него учитываются. А ширина у него по умолчанию подстраивается по ширине контента, как и у float-а.

Zverushka · October 29, 2013

А если бы контейнер был более узким, то элемент "3" был бы перенесен на следующую линию, несмотря на то, что ширина элементов не менялась.

Я пользуюсь довольно интересным способом, подсказанным здесь ранее. Ставлю text-align:justify и генерирую для главного контейнера псевдоэлемент :after { width: 100%; display:inline-block; content: ""} И контейнеры сами встают на всю ширину и не нужно указывать маргин - они всегда будут у краев и при этом на равноудаленном расстоянии друг от друга.

npofopr · October 29, 2013

А если бы контейнер был более узким, то элемент "3" был бы перенесен на следующую линию, несмотря на то, что ширина элементов не менялась.
Я пользуюсь довольно интересным способом, подсказанным здесь ранее. Ставлю text-align:justify и генерирую для главного контейнера псевдоэлемент :after { width: 100%; display:inline-block; content: ""} И контейнеры сами встают на всю ширину и не нужно указывать маргин - они всегда будут у краев и при этом на равноудаленном расстоянии друг от друга.

Видимо вы про что то такое http://css-live.ru/articles-css/ravnomernoe-vyravnivanie-blokov-po-shirine.html

FRUTALITY · October 29, 2013

Добавил вариант display:table в опрос.

Действительно, этот момент я как-то упустил. Потому что практически не использовал этот вариант. Насколько я понимаю, суть тут, в отличие от таблиц, в принципе не меняется. Представляем макет в виде таблицы (а сложный макет - в виде огромной таблицы с вложенными таблицами), разметку делаем div'ами, но в CSS отмечаем, по сути, все то же самое, что мы бы отметили тегами table, tr, td (и т.д.).

Чуть проще, но разве в поддержке не сложно?

Про флексбоксы слышал совсем краем уха. Спасибо за напоминание, почитаю на свежую голову завтра (сейчас у нас уже ночь). Но судя по вашему описанию, тоже не подарок.

Немного не так. Такой блок внутри ведет себя как обычный блок, причем с отдельным контекстом форматирования ...

Тут вы правы, я упростил

Zverushka, вы не могли бы привести пример? Для макета из моего первого поста. Кажется, или я вас не так понял, или вы меня.

Edited October 29, 2013 by FRUTALITY

SelenIT · October 29, 2013

а сложный макет - в виде огромной таблицы с вложенными таблицами

Зачем? Речь же идет о частной задаче — выстраивании блоков в ряд по горизонтали, разве нет? Для современных браузеров вполне хватает display: table для контейнера и display: table-cell для «ячеек». Из неупомянутых ранее минусов — невозможность абсолютного позиционирования относительно таких «ячеек» (как и относительно обычных, впрочем), частично решается вложенными обертками.

Сложность поддержки для CSS-таблиц, флоатов и инлайн-блоков, имхо, сопоставима. Всё-таки ни один из трех способов не предназначен напрямую для выстраивания блоков (если на то пошло, CSS-таблицы приспособлены больше других), отсюда необходимость тех или иных хаков (для флоатов — клирфиксы, для инлайн-блоков — обнуление пробелов, и т.п.).

судя по вашему описанию, тоже не подарок

Сами по себе, тем более в последней редакции спеки — именно что подарок. Вещь одного порядка с гридами, если не круче (смотря для каких задач, конечно). Но браузеры, увы... как всегда. Вот хорошая статья о них с примерами.

FRUTALITY · October 29, 2013

Зачем? Речь же идет о частной задаче — выстраивании блоков в ряд по горизонтали, разве нет?

Ну, я, конечно, именно такой пример привел. Очень простой. Но реальность состоит из сложных макетов. И я постоянно нахожусь в поисках идеала не для решения задачек в 10 строк, разумеется

Возьмем, к примеру, макет профиля во "ВКонтакте". Специально не смотрю, как он сверстан. Но просто присмотритесь: хэдер состоит из рядом стоящих элементов.

Далее - три колонки (меню, колонка с фотографией, колонка с контентом). В каждой колонке (кроме меню) снова элементы, расположенные рядом по горизонтали. По сути, весь макет ими пронизан. И они вложены друг в друга. Вложенность многоуровневая. Мне почему-то не кажется, что макет такой сложности довольно удобно будет верстать с помощью display:table. А особенно поддерживать, добавляя/убирая элементы (или вообще перекомпоновывая). Впрочем, пока у меня это лишь на уровне ощущений. Таких сложных макетов на display:table я не верстал.

За ссылки благодарю. Ознакомлюсь.

Catherine · October 29, 2013

Но до сих пор не нашел для себя действительно удобного, идеального метода выравнивания блочных элементов по горизонтали. О чем, собственно, речь. Есть какой-то макет с кучей элементов. И некоторые элементы надо расположить на одной линии по горизонтали, вписав в какой-нибудь фиксированный контейнер. Итак, какие есть способы сверстать такой "макет"?

В зависимости от ситуации. Использую в таких случаях table-cell, inline-block, float'ы. Использовать CSS3 Flexible Box'ы в рабочих проектах пока не решаюсь из-за слабой поддержки браузерами.

npofopr · October 29, 2013

Зачем? Речь же идет о частной задаче — выстраивании блоков в ряд по горизонтали, разве нет?
Ну, я, конечно, именно такой пример привел. Очень простой. Но реальность состоит из сложных макетов. И я постоянно нахожусь в поисках идеала не для решения задачек в 10 строк, разумеется
Возьмем, к примеру, макет профиля во "ВКонтакте". Специально не смотрю, как он сверстан. Но просто присмотритесь: хэдер состоит из рядом стоящих элементов.
Далее - три колонки (меню, колонка с фотографией, колонка с контентом). В каждой колонке (кроме меню) снова элементы, расположенные рядом по горизонтали. По сути, весь макет ими пронизан. И они вложены друг в друга. Вложенность многоуровневая. Мне почему-то не кажется, что макет такой сложности довольно удобно будет верстать с помощью display:table. А особенно поддерживать, добавляя/убирая элементы (или вообще перекомпоновывая). Впрочем, пока у меня это лишь на уровне ощущений. Таких сложных макетов на display:table я не верстал.
За ссылки благодарю. Ознакомлюсь.

Это вам тогда сетку лучше использовать.

Ваш пример и Вконтакт совсем разные вещи.

Одно дело меню из table-cell сделать, а другое сайт из блоков слепить.

Вы или вопрос не так поставили или начинаете не в ту сторону идти.

Для каждой задачи свое решение. Не ищите велосипед под все дороги, гайки крутить больше придется потом. (пока флекбоксы конечно всеми не станут поддерживаться =)

Edited October 29, 2013 by npofopr

FRUTALITY · October 31, 2013

Да, Flexbox тоже классная штука. Напоминает Grid, которую пропихивает MS. Жаль, что пока ни то, ни другое, не поддерживается всеми браузерами.

npofopr, извините, если этой темой ввел вас в заблуждение. Не искал решение сиюминутной проблемы; искал "серебряную пулю", так сказать. Впрочем, насчет "для каждой задачи свое решение" — это вы очень правильно сказали. Не могу не согласиться.

P.S. SelenIT, почитал у вас в блоге статью про inline-block, пару новых моментов для себя узнал. Спасибо

А флексбоксов / сетку ждут многие, как я посмотрю?

npofopr · October 31, 2013

сетку

сетку? Или вы опять про что то свое или не понятно.

Сетки уже давно повсеместно используюсь.

Флекбоксы тоже не ждут, кому надо и кому позволяет ТЗ пользуются)

SelenIT · October 31, 2013

Полагаю, под «сеткой» автор подразумевал Grid Layout.

Zverushka · October 31, 2013

У меня тут вопросик возник. Когда мы выравниваем элементы через inline-block и &:after width 100% конструкцию, у нас остается отступ внизу. Чтобы его убрать ставим ул line-height: 0, fonts-size:0; Проблема, что при font-size:0 блоки в ослике схлопываются вообще без расстояния между друг другом. Как бы то обойти без хаков под ие?

FRUTALITY · October 31, 2013

сетку? Или вы опять про что то свое или не понятно.

SelenIT прав, я про Grid Layout.

Sign In

Горизонтальное выравнивание блочных элементов

Что предпочитаете вы? 8 members have voted

Question

Link to comment

Share on other sites

14 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Similar Content

Обсуждения

Important Information

Что предпочитаете вы?
8 members have voted