Можно ли выровнять заголовки разного размера по общей нижней границе, если они в разных контейнерах?

Question

[Eediter]

Имеются два блока:

display: inline-block;
vertical-align: top;

В этих блоках по заголовку разного размера (48px и 40px).
У заголовков одинаковая высота строки, требуется выровнять их по общей нижней границе.



Пример: cssdesk.com/dW5UN
position и margin использовать запрещается

Может, кто-нибудь подскажет возможное решение?

Answer 1

[Eediter]

В контексте данной задачи получилось решить проблему сл. образом:
cssdesk.com/R8WJ8

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

Comments

[Юрий Лобанов]

Хитро )

Answer 2

[VK-Style]

Я просто не профи, но Вы видели подобные сайты где указано вместе?

Answer 3

[Юрий Лобанов]

codepen.io/iiil/pen/feCiu
Вот так вот можно.

Comments

[VK-Style]

И чем он отличается от сайта автора?

[Юрий Лобанов]

@VK-Style то есть чем?

[VK-Style]

То есть кодом.

[Юрий Лобанов]

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

[VK-Style]

Ну хорошо, я вообщем не ребёнок. Мне 25 лет.

[Юрий Лобанов]

@VK-Style а ведете себя именно как обиженный ребенок. Я ведь не картинку представил, а код - посмотрите повнимательнее.
Ответ @Lisonok мне нравится больше, так как он не фиксирует высоту заголовка. Но с другой стороны я воспринял ограничение не использовать margin и position в том числе как ограничение не использовать padding (видимо, ошибочно). Также уверен, что исходя из задачи фиксированная высота заголовка может устроить автора вопроса.

[Юрий Лобанов]

@korobochkin ну стили не сброшены, может в этом причина. Подключил normalize - попробуйте сейчас.

[Eediter]

@korobochkin вероятно в ваших случаях элементы находились в одном контейнере, и была возможность использовать общую линию для шрифтов. В моём примере заголовки находятся в разных контейнерах и не могут наследовать свойства.

Answer 4

[Lisonok]

Попробуйте так

h1,h2 {
    display: inline-block;
    background: #133552;
    color: white;
    padding: 0;
    margin: 0 0 24px 0;
    width:100%;
}
h1 {
    font-size: 48px;
    line-height: 48px;
}
h2 {
    font-size: 40px;
    line-height: 40px;
    padding-top: 8px;    
}

Comments

[VK-Style]

Пробовал, не работает.

[VK-Style]

Тоже нет.

[Lisonok]

cssdesk.com/QdKg6
У меня работает

[Eediter]

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

[Юрий Лобанов]

@Eediter а мое решение?

[Eediter]

@iiil решение не подошло, т.к. не кроссбраузерно, универсальную высоту строки для h2 подобрать не удалось. Да и подобная перспектива, постоянно подбирать высоту строки не очень радует. Однако, ваш вариант натолкнул меня на решение, которое я опишу ниже.

Answer 5

[Anton Yatsenyuk]

А если используете Compass, то у него есть отличный инструмент - Vertical Rythm

Comments

[Eediter]

Использую, и вертикальный ритм в примере присутствует, но не могли бы вы пояснить, как в данном случае поможет Compass (vertical_rhythm)?

[Anton Yatsenyuk]

@Eediter можно легко выровнять всё по линейкам. Вот видео, думаю поможет вам: https://www.youtube.com/watch?v=Leert-TnSSg

[Eediter]

@spamforhope Дело в том, что я действительно использую Compass с вертикальным ритмом, но что вы посоветуете использовать из него для данного конкретного случая? В видео рассматривается база для вертикального ритма, которая к вопросу не имеет совершенно никакого отношения.