Список блоков с разным вертикальным выравниванием

[miloslovesky]

Кто-нибудь знает, как сделать так:

Пробовал способ Чикуёнка, но там блоки в плотную не становятся.

[USF]

не совсем понял, что вам требуется

но inline-block + vertical-align справляются.

а чтобы были вплотную нужно для самих инлайнов обнулять шрифты и line-height, а потом восстанавливать у дочерних

[miloslovesky]

не совсем понял, что вам требуется

но inline-block + vertical-align справляются.

а чтобы были вплотную нужно для самих инлайнов обнулять шрифты и line-height, а потом восстанавливать у дочерних

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

Вот пример того, что сделал я. Отступы обнулил, однако блоки не влезают (в данном случае в файрфоксе).

[USF]

word-spacing: -0.43em;

уберите и проверьте

[miloslovesky]

word-spacing: -0.43em;

уберите и проверьте

Убрал. Не помогло

[USF]

chrome - помогло

как бы то ни было

letter-spacing: -0.31em;
word-spacing: -0.43em;

неправильно и не хорошо. обнуляйте шрифты и line-height для родителя и отступов не станет. внутри восстановите(не в относительных величинах).

[SelenIT]

Обнулять тоже не супер-айс. Лучший вариант — честно убрать пробелы из кода, остальное хаки разной степени кривизны и надежности. Но «магические» -0.43 и -0.31 — это, конечно...

Ну а по теме, если блоки не должны перескакивать при изменении ширины контейнера, то, имхо, самый доступный вариант решения — CSS-таблица. Еще правильнее было бы использовать флексбоксы, но это надо смотреть на планируемую аудиторию.

[miloslovesky]

chrome - помогло

как бы то ни было

letter-spacing: -0.31em;
word-spacing: -0.43em;

неправильно и не хорошо. обнуляйте шрифты и line-height для родителя и отступов не станет. внутри восстановите(не в относительных величинах).

Да проблема в том, что способов куча, как убрать пробел между блоками. Но нету решения, которое бы подошло всем.

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

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

[miloslovesky]

Обнулять тоже не супер-айс. Лучший вариант — честно убрать пробелы из кода, остальное хаки разной степени кривизны и надежности. Но «магические» -0.43 и -0.31 — это, конечно...

Ну а по теме, если блоки не должны перескакивать при изменении ширины контейнера, то, имхо, самый доступный вариант решения — CSS-таблица. Еще правильнее было бы использовать флексбоксы, но это надо смотреть на планируемую аудиторию.

И как вы в таблице выровняете кнопку по низу?

Флексбоксы это слишком. С тем же успехом я мог бы использовать first-child и last-child, вместо того, что бы отрицательный отступ ставить. Но как вы понимаете ИЕ бы всё поломал.

[USF]

в том то и дело, что способ, описанный мной, подходит везде.

обнуляя шрифт и line-height убираются запасы выносных элементов и межсимвольное расстояние. а так как inline-block элемента это буквы, то и расстояния между ними не будет.

а у вас вообще Inline элменты, что значит, что размер им указать не получится, ровно как вертикальные margin'ы и padding'и влиять на них не будут.

[miloslovesky]

в том то и дело, что способ, описанный мной, подходит везде.

обнуляя шрифт и line-height убираются запасы выносных элементов и межсимвольное расстояние. а так как inline-block элемента это буквы, то и расстояния между ними не будет.

а у вас вообще Inline элменты, что значит, что размер им указать не получится, ровно как вертикальные margin'ы и padding'и влиять на них не будут.

Вообще вроде как сработало

[SelenIT]

подходит везде.

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

использовать first-child и last-child, вместо того, что бы отрицательный отступ ставить. Но как вы понимаете ИЕ бы всё поломал.

first-child в IE7+ работает.

Насчет таблицы я думал как-то по аналогии с чикуёнковским решением (не считая тривиального, но некрасивого решения с реальным отрывом кнопок в др. строку). Признаю, поторопился (как раз вебкит подкачал, у него с таблицами вообще сложно).