2 inline-block - один слева, другой справа.

[Zverushka]

Представим блок, внутри которого находятся 2 блока со стилем Inline-block (это им подходит по смыслу).

Как мне разместить один блок у левого края, другой у края справа?

Если я ставлю правому блоку до кучи стиль float: right, то мое оформление как Inline-block (то есть я не задаю ширину, а только паддинги и блок сам растягивается по соедржимому) почему-то сохраняется, кстати да - ведь так и должно быть? плавающие блоки не растянуты на всю ширину, а автоматом подстраиваются под содержимое...

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

УПД. Проблема еще в том, что эти блоки выравнены вертикально по центру.

Edited October 6, 2013 by Zverushka

[lexxcode]

Можно так, например.

[caprella]

Можно так, например.

Интересное решение, я бы не додумалась Подскажите, плз, почему именно такой набор свойств в .t:after.

[lexxcode]

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

[webdrug]

Любопытное решение + вам

[SelenIT]

кстати да - ведь так и должно быть? плавающие блоки не растянуты на всю ширину, а автоматом подстраиваются под содержимое...

Абсолютно верно. Еще display:table по умолчанию так себя ведет.

но кроме последней строки

Теоретически, существует text-align-last, но практически он поддерживается только в Fx (за префиксом) и... в IE5.5+ (!). Поэтому без псевдоэлемента-распорки пока не обойтись.

[SAiNT]

действительно, интересное решение. а все браузеры его поддерживают?

[SelenIT]

IE8+, Fx3.0+, все вебкитные, все Оперы. В IE7- можно заставить работать парой нехитрых хаков.

[Zverushka]

Очень классное решение.

Я теперь так выравниваю все инлайновые блоки, которые должны быть растянуты по ширине. Вместо того, чтобы сидеть и прописывать им маргины и высчитывать их старательно.

[SelenIT]

Кстати, таким макаром можно распределять по ширине любое число блоков.

[SAiNT]

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

 

ещё раз спасибо, SelenIT

[CoDy]

Вот еще один вариант решения задачи прижатия 2 блоков но краям родителя, без их вывода из общего потока: http://jsfiddle.net/7SeNx/25/. Не такой эффектный как у alexriz, но, думаю, имеет "право на жизнь" в некоторых случаях(левый элемент перекрывается правым и фон нельзя задать для правого блока).

Edited November 9, 2013 by CoDy