Есть много постов о том, как выровнять по правому нижнему углу, но все они использовали абсолют, и я не могу этого сделать, потому что я не хочу, чтобы мои 2 элемента перекрывались, если один оказался слишком большим для размера окна.
Я попытался с помощью float, и он работает для выравнивания вправо, но не для выравнивания дна
<div style="border-bottom: 1px solid; padding-bottom:10px;">
<h1 style="display:inline;">
This is my big title - Bla bla bla
</h1>
<div style="
font-size: small;
float: right;
padding: 5px 0px 0px 20px;
font-style: italic;
display: inline;">
Published on Friday 11th August 2017 at 12:46
</div>
<div style="clear:both"></div>
</div>
Вы можете проверить результат в https://jsfiddle.net/j66q82gy/7/
Когда окно узкое, не имеет значения, что оно не выровнено снизу, но когда окно широкое, а h1 и средний div находятся на одной линии, становится очевидно, что оно не выровнено снизу, и мне нужно это быть выровненным снизу.
Мне также нужно держать их в одной строке, поэтому встроенные должны оставаться как в h1, так и в среднем div.
Изменить: Flex помещает вещи в своего рода неловко наполовину, наполовину блок, как это: i.imgur точка com / YA6TdBt.png
Мне нужно что-то похожее на это i.imgur dot com / Awj9Bht.png (верхнее изображение - мой код, нижнее - фотошоп, чтобы выглядеть так, как мне нужно).
5 ответов
С Flexbox вы можете выровнять как снизу, так и внутреннюю часть div
вправо.
Добавьте display: flex; align-items: flex-end
к внешнему div
, сбросьте поле на h1
(или вы можете добавить один к другому внутреннему div
), а затем установите margin-left: auto;
на внутренний div
align-items: flex-end
сохранит внутреннюю нижнюю часть div
выровненной с h1
, а margin-left: auto;
сместит внутреннюю div
вправо.
Обратите внимание, что из-за разного размера шрифта их внутренние метрики создадут несколько больший пробел под h1
. Здесь я просто добавил нижний отступ в 4 пикселя на внутреннем div
, но вы также можете поиграть с общим line-height
Обновлено на основе комментария
Если оставить текст развернутым, пока он не достигнет ширины своих родителей, добавьте flex-wrap: wrap;
к внешнему div
<div style="border-bottom: 1px solid; padding-bottom:10px; display: flex; flex-wrap: wrap; align-items: flex-end;">
<h1 style="margin: 0;">
This is my title
</h1>
<div style="
margin-left: auto;
font-size: small;
padding: 0 0 4px 20px;
font-style: italic;">
Published on Friday 11th August 2017 at 12:46
</div>
</div>
<br>
<div style="border-bottom: 1px solid; padding-bottom:10px; display: flex; flex-wrap: wrap; align-items: flex-end;">
<h1 style="margin: 0;">
This is my big title - Bla bla bla
</h1>
<div style="
margin-left: auto;
font-size: small;
padding: 0 0 4px 20px;
font-style: italic;">
Published on Friday 11th August 2017 at 12:46
</div>
</div>
<br>
<div style="border-bottom: 1px solid; padding-bottom:10px; display: flex; flex-wrap: wrap; align-items: flex-end;">
<h1 style="margin: 0;">
This is my big title - Bla bla bla bla bla bla bla bla bla
</h1>
<div style="
margin-left: auto;
font-size: small;
padding: 0 0 4px 20px;
font-style: italic;">
Published on Friday 11th August 2017 at 12:46
</div>
</div>
Надеюсь, это поможет
<div style="border-bottom: 1px solid; padding-bottom:10px;display: table;">
<h1 style="display:inline;">
This is my big title - Bla bla bla
</h1>
<div style="
font-size: small;
padding: 5px 0px 0px 20px;
font-style: italic;
display: table-cell;
vertical-align:bottom;">
Published on Friday 11th August 2017 at 12:46
</div>
<div style="clear:both"></div>
</div>
Способ 2:
Вы можете перейти по ссылке flexbox, поскольку она очень проста в использовании и обладает высокой сопротивляемостью.
Это то, что вы предполагали?
<div style="border-bottom: 1px solid; padding-bottom:10px; display:flex; flex-wrap: wrap;">
<h1 style="display:inline;">
This is my big title - Bla bla bla
</h1>
<div style="
font-size: small;
float: right;
padding: 5px 0px 0px 20px;
font-style: italic;
align-self: flex-end;
margin-left: auto;">
Published on Friday 11th August 2017 at 12:46
</div>
<div style="clear:both"></div>
</div>
https://jsfiddle.net/eq6jLnct/5/
Измените высоту на то, что вам нужно. Или просто используйте минимальную высоту.
Обратите внимание, что flexbox не поддерживается для всех браузеров: http://caniuse.com/#search=flex -Box
Вы можете использовать flexbox свойства вместо {{X0} } ...
Полностью обновленный ответ
.flex {
display: flex;
align-items: baseline;
flex-wrap: wrap;
}
.flex div {
margin-left: auto;
}
<div style="border-bottom: 1px solid; padding-bottom:10px;" class="flex">
<h1>
This is my big title - Bla bla bla
</h1>
<div style="
font-size: small;
padding: 5px 0px 0px 20px;
font-style: italic;">
Published on Friday 11th August 2017 at 12:46
</div>
</div>
Проверьте этот codePen, который я добавил, вот CSS:
float: right;
transform: translateY(0px);
Похожие вопросы
Новые вопросы
css
CSS (каскадные таблицы стилей) - это язык таблиц стилей представления, используемый для описания внешнего вида и форматирования документов HTML (язык разметки гипертекста), XML (расширяемый язык разметки) и элементов SVG, включая (но не ограничиваясь) цвета, макет, шрифты, и анимации. Также описывается, как элементы должны отображаться на экране, на бумаге, в речи или на других носителях.