Совместите нижнюю часть дочернего элемента с базовой линией родителя.

Question

Я хотел бы выровнять дочерний элемент по вертикали в гибком поле (или текстовом поле) так, чтобы его нижняя часть совпадала с базовой линией его родных элементов.

Это происходит по умолчанию для изображений:

MDN Элемент :

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

Можно ли добиться того же эффекта с

вместо ?

Позже правка: Я прилагаю фрагмент. Я хочу, чтобы нижняя граница последнего ребенка совпадала с нижней границей изображения (базовая линия остальных детей). Я не хочу, чтобы все выровнялось по дну.

.parent {
    display: flex;
    align-items: baseline;
}

.child2 {
    font-family: monospace;
    font-size: 200%;
}

img {
    border-bottom: 1px solid red;
}

.child-bottom {
    padding: 5px;
    background-color: #fdd;
    border-bottom: 1px solid red;
}

<div class="parent">
    <span>These</span>
    <span class="child2">are</span>
    <span>baseline</span>
    <img src="https://cdn.sstatic.net/Img/ico-binoculars.svg?v=d4dbaac4eec9">
    <span>aligned.</span>
    <div class="child-bottom">This child's bottom border should be on the baseline of the parent.</div>
</div>

Позднее редактирование 2. Изображение состоит из тысячи слов. Надеюсь, это поможет уточнить, какой тип выравнивания мне нужен. Обратите внимание, как буквы j, p и q проходят ниже базовой линии.

Answer 1

Так что я не нашел хорошего решения для вашего вопроса, но я дам вам то, что я пробовал, возможно, это даст вам некоторые идеи.

Очевидно, выравнивание базовой линии с помощью flexbox только выравнивает текст содержимое, как вы хотите, а не сам div.

.parent {
    display: flex;
    align-items: last baseline;
}

.child2 {
    font-family: monospace;
    font-size: 200%;
}

img {
    border-bottom: 1px solid red;
}

.child-bottom {
    padding: 5px;
    background-color: #fdd;
    border-bottom: 1px solid red;
}

<div class="parent">
    <span>These</span>
    <span class="child2">are</span>
    <span>baseline</span>
    <img src="https://cdn.sstatic.net/Img/ico-binoculars.svg?v=d4dbaac4eec9">
    <span>aligned.</span>
    <div class="child-bottom">This child's bottom border should be on the baseline of the parent.</div>
</div>

Но пустой базовый элемент будет выровнен по базовой линии?

.parent {
    display: flex;
    align-items: baseline;
}

.child2 {
    font-family: monospace;
    font-size: 200%;
}

img {
    border-bottom: 1px solid red;
}

.child-bottom {
    padding: 5px;
    width:50px;
    height:50px;
    background-color: #fdd;
    border-bottom: 1px solid red;
}

<div class="parent">
    <span>These</span>
    <span class="child2">are</span>
    <span>baseline</span>
    <img src="https://cdn.sstatic.net/Img/ico-binoculars.svg?v=d4dbaac4eec9">
    <span>aligned.</span>
    <div class="child-bottom"></div>
</div>

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

Лучшее решение, которое я нашел, это, я думаю, выровнять текст с помощью flexbox, а затем перевести блок в соответствии с размером отступов ... Надеюсь, это вам немного поможет ...

.parent {
    display: flex;
    align-items: last baseline;
}

.child2 {
    font-family: monospace;
    font-size: 200%;
}

img {
    border-bottom: 1px solid red;
}

.child-bottom {
    padding: 5px;
    background-color: #fdd;
    border-bottom: 1px solid red;
    transform:translateY(-10px);
}

<div class="parent">
    <span>These</span>
    <span class="child2">are</span>
    <span>baseline</span>
    <img src="https://cdn.sstatic.net/Img/ico-binoculars.svg?v=d4dbaac4eec9">
    <span>aligned.</span>
    <div class="child-bottom">This child's bottom border should be on the baseline of the parent.</div>
</div>

Другое решение - выровнять все по flex-end так, чтобы все дочерние элементы были выровнены снизу, но я думаю, что это не то, что вы хотите, как вы уже сказали .

Answer 2

Наконец-то я нашел решение :) Оно было спрятано где-то в спецификации CSS:

Базовая линия 'inline-block' - это базовая линия его последней строки в поле нормальный поток, если только у него нет ни линейных блоков в потоке, либо если его свойство 'overflow' не имеет вычисляемого значения, кроме 'visible', в этом случае базовой линией является нижний край поля.

Это взято из https://www.w3.org/TR/CSS2/visudet.html#propdef -vertical-align , внизу страницы.

Итак, чтобы переместить baseline к нижнему полю edge, вам нужно только добавить display: inline-block и overflow: hidden (или что-либо, кроме 'visible', например: 'auto') к дочернему элементу:

body {
    font-size: 200%;
}

.bottom {
    display: inline-block; /* <--- this */
    overflow: hidden; /* <--- and this */

    width: 10rem;
    border: 2px solid orange;
    padding: 2rem;
}

<div>
    <span>text jklmnopqr</span>
    <div class="bottom">div with bottom on the baseline</div>
</div>

Answer 3

Я создал самый простой пример.

.parent{
  display: inline-flex;
  flex-direction: row;
  align-items: flex-end

}
.child{
  background: red;
  color: white;
  width: 50px;
  height: fit-content
}

<div class='parent'>
  <div class='child'>some text</div>
  <div  class='child'>some more text</div>
  <div  class='child'>some more more more more more more more more text</div>
</div>