Равномерное выравнивание блоков по ширине

[ishaba]

Спасибо огромное! Сам собирался исследовать этот вопрос и написать статью, но никак не мог выкроить времени, а тут все предельно подробно, замечательно.

[psywalker]

Пожалуйста. Изучайте на здоровье!

[jesustown]

не говорите это моему дизайнеру, неделю назад я его уверял, что это невозможно…

[egorinsk]

Слушайте, у вас в примере 3 ширина блоков задана жестко — где это может вообще пригодиться? По моему, задача обычно бывает другая — равномерно распределить блоки произвольной (определяемой контентом) ширины с равными пробелами между ними.

Хотя, конечно про свойство text-justify почитать интересно. Майкрософт изобрела часть CSS3 еще лет 10 назад.

[Imelstorn]

в примере поставил width: 19% вместо 98px и все гуд работает, а это вообще тру тру тру ))) Спасибо автору )

[0mm]

Буквально вчера решал задачу, аналогичную описанной. Нужно было три баннера расположить по ширине родительского контейнера. Так что вы зря, проблема «рабочая».

[ishaba]

Проблема «рабочая» еще и потому что в Photoshop есть такой способ выравнивания объектов, уже не раз присылали на верстку макеты, где элементы были выровнены подобным образом.

[psywalker]

Ширина выставлена для наглядности примера. Вы смело можете убрать её, если пожелаете. Так что задача «равномерно распределить блоки произвольной (определяемой контентом) ширины с равными пробелами между ними» — решается :)

[Mystex]

Спасибо!!! Когда смог решить эту задачу только с применением jQuery.

[hunterxp]

Супер! Раньше использовал отрицательный сдвиг ul, и рассчитывал отступы так, чтобы последний оказывался прижат к правому краю.
Теперь всё будет проще :)
Спасибо большое, Максим.

[AlexFadeev]

Очень круто. И самое главное, изящно.

[Amalgama]

Большое спасибо за статью! До этого пользовалась решением, описанным здесь: habrahabr.ru/blogs/css/81611/…

[psywalker]

Ой, ёй, ёй, сколько разметки лишней. Хорошо, что всё таки удалось более затратные и изящные решения!

[ArtyV]

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

Способ выравнивания, сам по себе, очень старый — можно даже вообще без лишней разметки (.helper) обойтись, т.к. в IE newspaper и так всё решит, а в нормальных браузерах всё решается с помощью псевдоэлементов

[sdevalex]

А чем не устраивает :last-child + expression для IE?

[sdevalex]

Для IE6 точно нужен expression, IE7 не помню. А так уверен…

[psywalker]

А зачем expression, если в посте представлены решения без него?

[sdevalex]

В 2-3 раза меньше кода для нормальных браузеров, да и решение с :last-child проще для понимания. А вообще использовать готовую сетку и не думать о таких вещах.

[psywalker]

Если бы речь шла о «в 2-3» раза меньше кода 500-а строк, то да, разница была бы на лицо, а в последнем варианте, например, кода ерунда и игра с expression не стоит свеч, мне кажется.

Но, не смотря на это, было бы полезно взглянуть на реализацию такого примера. Сможете сделать?

[GruZZ]

Забавно одну за другой видеть хорошо разобранные темы, о которых сам хотел написать статью…
А про выносные таблицы (и вообще любые блоки) из блока с overflow:hidden; собираетесь написать? :-)

[psywalker]

А как же! Следите за новостями :)

[GruZZ]

Вообще прикольно, я такой блок с display:table растягивал по-другому, но код тут приводить не буду из эстетических соображений :-)

А вот про выносные блоки — это я чуть-чуть про другое говорил, надо будет пример где-нибудь накидать и так же Максу отправить.

[EvgeniyLazarev]

Офигеть :-)

[ArtyV]

Офигеть, я тебе сидел это рассказывал, а ты спустя два года «офигеть» тут пишешь :D

[remal]

А что делать в том случае, когда на последней строке остается только 2 из 4(например) элемента и они оба оказываются выровнены по левому краю?

[Dmitry_f]

Знаете, это решение реализуемо через text-align-last, для которого реализован плагин и соответствующая статья здесь.

[ishaba]

Вот хоть убейте, не могу представить, каким образом text-align-last, решает эту задачу?

[Evengard]

Супер!

[greatkykyryzo]

Полезная информация с утра! Буду применять теперь. Постоянно проблемой было.

[Mordraug]

отлично.

[Staltec]

Вы не только спасли котёнка, но и мои нервные клетки в придачу. В избранное однозначно!

[Mithgol]

Ну хорошо, «text-align-last: justify;» заставляет IE дать последней строке абзаца (она же и первая) выключку по ширине.

А чем обеспечивается для последнего варианта выравнивание в остальных браузерах? Вот чего я пока ещё не понимаю.

[psywalker]

Это происходит за счёт псевдоэлемента (хелпера), который фактически и есть последний строчно-блочный элемент в списке. За счёт его растяжки на 100% по ширине text-align: justify; включается в работу на предпоследней строке, тобишь на первой, где у нас все видимые пункты.

[Sytrus]

Спасибо, мозг, за отличную статью ;)

[psywalker]

Пожалуйста, дружище, изучай на здоровье!

[habratchanka]

Тема не нова. Решение с «text-align:justify» давно рассмотрено тут:
www.getincss.ru/2008/03/29/ravnoudalennye-elementy/
www.getincss.ru/wp-content/uploads/2008/elements.html

[psywalker]

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

[desigens]

Вы продолжаете меня радовать, Максим. Спасибо!

[frst]

:) изобрел подобную конструкцию в 2009м ivanpakhomov.ya.ru/replies.xml?item_no=2274

[frst]

но статью вашу одобряю, пожалуйста не минусуй меня о, хабр

[psywalker]

Да, но это всё не то, т.е. я считаю, что есть решения лучше и они представлены в этой статье.

[MTonly]

Теперь остаётся между каждыми двумя пунктами добавить разделитель и сделать так, чтобы каждый пункт занимал всё пространство между двумя соседними разделителями. ;-)

[frst]

тег table к вашим слугам

[MTonly]

Не забывайте об условии равного расстояния между текстами пунктов.

[psywalker]

Покажите тестовый пример плз, того, что вы имеете ввиду.

[MTonly]

Как-то это не оч. красиво и не pixel-perfect. ;-)

[MTonly]

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

[psywalker]

А нарисовать сможете?

[MTonly]

Спасибо за усилия, Илья, стало заметно лучше. ;-)

К сожалению, есть ряд недостатков, затрудняющих применение решения на практике: у ссылок в зависимости от шрифта могут появляться паразитные вертикальные отступы, причём в разных браузерах разные (в одних — только сверху, в других — также и снизу от ссылок — см. jsfiddle.net/cjGgT/ ), в IE8 некликабельна половинная часть пустого пространства до разделителя слева от текста ссылки, в Chrome 17 для щелчка доступна только часть ссылки, соответствующая высоте текста (области над текстом и под текстом некликабельны); не слишком интуитивно понятная магия с вертикальным padding, нежелательная фиксация высоты списка (вместо её автоматического определения браузером на основании высоты содержимого). (В IE7, кстати, не работает, но для меня это роли не играет.)

Но как proof-of-concept — вполне. ;-)

[MTonly]

К вопросу об UL-списке: список ссылок (объединённая последовательность однотипных сущностей) не перестаёт быть списком вне зависимости от его функциональной нагрузки (навигация или не навигация). Не флейма ради, а ясности для. ;-)

[MTonly]

Последовательность навигационных пунктов является относительно самодостаточной лишь до того момента, пока одна из ссылок не перестаёт быть таковой ввиду совпадения её URL-адреса с адресом текущей страницы.

Если у нас не список, получим конструкцию вида «последовательность ссылок + обычный текст + последовательность ссылок», которая для машины может выглядеть уже как цельное предложение. (Бывает навигация и в виде фразы.) В случае же использования списка последовательность названий разделов останется связанной последовательностью однотипных сущностей вне зависимости от того, является ли каждый из пунктов ссылкой.

[simpel]

Opera 11.61 Mac — последний пример разъехался.

[simpel]

[psywalker]

Да, есть такое дело. Жаль, но у меня нет Mac-a. Очень надеюсь, что кто нибудь сможет повозится и понять, в чём причина.

[simpel]

В опере все ломает вот эта строчка ul li {font-size:1px}, но без нее в webkit появляется пробел после последнего li

[simpel]

опечатка! ul {font-size:1px} — все ломает, а вот ul {font-size:2px} делает все более менее ок, пробел уменьшается до 1px (справа) — и в опере все становиться ок, что для нее обычно.

[psywalker]

Спасибо за проделанную работу. А вы не могли бы выложить скриншот рабочего варианта в Opera и webkit-ов?
Да, и желательно css.

[simpel]

Opera: cl.ly/EPWJ
Webkit: cl.ly/EPyA
CSS: ul {font-size:2px} :)

надо найти четко работающий вариант, без зазора в 1px справа, пока только удаление переноса строки между последним li и ul решают этот вопрос, но это не спортивно!

[simpel]

как вариант быстрого фикса — noindex:-o-prefocus, ul {font-size:2px;}

[simpel]

пробовал, и ем и дроби

[psywalker]

Спасибо вам!

[AntonDiaz]

4-й вариант (под Win):
Firefox 3.6.27 — ок
Opera 7.21 — ок

[cryingjoker]

вопрос небольшой, а чем плох float?(я могу быть не опытным, поэтому если знаете, то был бы очень благодарен ссылке с материалом по данной штуке)
как я понимаю нам блоки нужны одинаковой ширены расположить равномерно?
а если использовать first-child с маленькой css'кой?

[simpel]

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

[psywalker]

В первых двух вариантов в статье я делал варианты как раз на float, и как можно увидеть, это не увенчалось успехом. Прочитайте внимательно всю статью, думаю станет ясно.

[Eureka]

Попробовал последний вариант. Обнаружился недостаток.
Если страница перед отдачей браузеру оптимизируется (удаляются лишние переносы строк и пробелы между тегами), пример не работает. Видимо это логично, поскольку если элементы списка не отделены друг от друга, браузер понимает их как одно единое слово и не пытается распределить их по ширине. Проблема выявилась когда я решил посмотреть на пример через GoogleTranslate.
Оказалось, что GT удаляет в переведенных участках странички избыточные символы (пробелы и переносы строк между тегами) и пример перестает работать.
Если не найдется решения, придется обратно перейти на неидеальный вариант display-inline + last-child.

[Eureka]

Ответил вам ниже ↓

[Eureka]

display:inline точно так же зависит от пробелов между тегами

Я неверно выразился, имел ввиду display:inline-block. С тем, что вы написали согласен. Но факт остается фактом, и данный приём мне не подходит, т.к. хочется, чтобы в популярном GoogleTranslate верстка сайта сохранялась + чтобы была возможность сжимать HTML не задумываясь о том, что верстка от этого пострадает.

[simpel]

Еще более интересным будет увидеть способ не просто выравнивать по ширине, а саму ширину делить между всеми элементами без таблиц (не поровну, а в зависимости от ширины каждого элемента)

[simpel]

да, похоже на то что надо, осталось проверить/адаптировать под все IE

[simpel]

не простая разметка, я смотрю, пробелы, переносы и неразрывные строки, и надо фиксить ie7.