Как выровнять заголовок по верхнему краю изображения (проблема с высотой строки)
У меня макет из 2 столбцов, где в левом столбце - заголовок, в правом столбце - изображение. Я хочу, чтобы заголовок и изображение были выровнены вверху следующим образом:
Теперь добился этого установкой h1 { line-height: 1em; }. Однако я также хочу, чтобы он работал, если высота строки больше, и если заголовок охватывает больше строк, как в этом примере кода:
body {
max-width: 400px;
}
div {
float: left;
width: 50%;
}
h1 {
margin: 0;
padding: 0;
line-height: 2em;
}
img {
width: 100%;
}<div>
<h1>Hello world!
<br>Foo Bar Baz</h1>
</div>
<div>
<img src = "https://media1.tenor.com/images/1c765c0d5963c84864bece62355713e0/tenor.gif?itemid=8240085">
</div>Я не хочу работать с отрицательными полями, потому что левый столбец будет заполнен контентом CMS позже. Я не могу контролировать, какой элемент (h1-h6, p и т. д.) Будет там отображаться и какая высота строки у этого элемента.
Заголовок и изображение должны быть выровнены по вертикали.
Прошу прощения за недоразумение, я имел в виду, что хочу, чтобы заголовок и изображение выровнялись вверху (см. Мой обновленный вопрос)
@Beppe line-height слишком высок ... в чем идея? Вы пробовали перенести line-height: 2em; (с h1) на правила div?
Кто бы ни проголосовал против ответов, пожалуйста, проголосуйте за. Вопрос был сформулирован неправильно (полностью), что привело к неправильным ответам. Ответы (по крайней мере, мои) потом будут удалены. Tnx.
Да, это не их вина.
@wazz, ну, вы сказали, что это making the answers wrong, поэтому, если они ошибаются, их следует исправить или удалить, лично я только что видел вопрос, и ответы не имеют ничего общего с вопросом
Умм, это то, что я только что сказал.
Ответы 2
Это идеальное время для использования макета flexbox в CSS.
С flexbox очень легко выровнять контент без необходимости устанавливать какую-либо конкретную высоту - так как вы можете позволить элементам быть той же высоты, что и их братья и сестры.
Я создал быструю демонстрацию с некоторыми незначительными изменениями в вашем коде, я считаю, что это дает результат, на который вы надеетесь:
body {
max-width: 400px;
}
h1 {
margin: 0;
padding: 0;
line-height: 2em;
}
img {
width: 50%;
}
.flex-container {
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}<div class = "flex-container">
<h1>Hello world!
<br>Foo Bar Baz</h1>
<img src = "https://media1.tenor.com/images/1c765c0d5963c84864bece62355713e0/tenor.gif?itemid=8240085">
</div>
<hr>
<div class = "flex-container">
<h2>Hello world!
<br>Foo Bar Baz Longer example with h2</h2>
<img src = "https://media1.tenor.com/images/1c765c0d5963c84864bece62355713e0/tenor.gif?itemid=8240085">
</div>Для получения дополнительной информации о flexbox посетите: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Спасибо за ваш ответ! Думаю, я недостаточно четко сформулировал свой вопрос: заголовок и изображение должны быть выровнены вверху (см. Мой обновленный вопрос). К сожалению, Flexbox здесь не помогает, так как даже с align-items: flex-start они не кажутся выровненными из-за высоты строки.
Вы всегда можете воспользоваться старым добрым свойством vertical-align. Однако это всегда было непростой задачей.
В вашем случае, например, мне пришлось сделать оба div'а display свойством inline-block, поскольку вам нужно, чтобы элементы были встроенными, чтобы вы могли их выровнять по вертикали.
Также мне пришлось поместить закрывающий тег одного div рядом с открытием следующего, потому что при их отображении inline отобразит новую строку в коде как пробел и, таким образом, заставит второй div перейти на новую строку.
body {
max-width: 400px;
}
div {
width: 50%;
display:inline-block;
vertical-align:middle;
}
h1 {
margin: 0;
padding: 0;
line-height: 2em;
}
img {
width: 100%;
} <div >
<h1>Hello world!
<br>Foo Bar Baz</h1>
</div><div class = "leDiv">
<img src = "https://media1.tenor.com/images/1c765c0d5963c84864bece62355713e0/tenor.gif?itemid=8240085">
</div>
Как именно вы хотите выровнять изображение 2? Против правого края? Вертикально? По горизонтали?