如何使用 CSS 将字母移动到其 div 的底部

Question

我想让字母 g、o、  和 n 与它们的 div 的底部对齐，并且完成 owhere 对齐给他们。

我该怎么做？（我已经尝试过 vertical-align、text-align 和 bottom: 0。）

P.S。一个最小的可重现示例是：

html:

<div class="input">
  <div class="char">g</div>
  <div class="char">o</div>
  <div class="char">&nbsp;</div>
  <div class="char">n</div>
  <div class="completions">
    <div>orth</div>
    <div>orthwards</div>
    <div>owhere</div>
  </div>
</div>

css:

div.input {
    position: absolute;
    bottom: 0px;
    display: flex;
}

div.prefix {
    display: flex;

}

div.completion {
    position: relative;
}

div.char {
    bottom: 0px;
}

它产生：

go north
    orthwards
    owhere

我愿意：

    orth
    orthwards
go nowhere

Answer 1

试试这个 css 代码

div.input {
    position: absolute;
    bottom: 0px;
    display: flex;
}

div.prefix {
    display: flex;

}

div.completion {
    position: relative;
}

.completions{
   display: flex;
}

div.char {
    bottom: 0px;
}

Answer 2

添加到 div.input：

align-items: flex-end;

这是我关于如何使用 flexbox 的参考文档：CSS Tricks Flexbox Guide

Answer 3

另一种解决方案很简单，只需将 margin-top: auto; 添加到 .char。

让我知道进一步说明

希望对您有所帮助:)

div.input {
    position: absolute;
    bottom: 0px;
    display: flex;
}

div.prefix {
    display: flex;

}

div.completion {
    position: relative;
}

div.char {
    bottom: 0px;
  margin-top: auto;
}

    <div class="input">
      <div class="char">g</div>
      <div class="char">o</div>
      <div class="char">&nbsp;</div>
      <div class="char">n</div>
      <div class="completions">
        <div>orth</div>
        <div>orthwards</div>
        <div>owhere</div>
      </div>
    </div>

如何使用 CSS 将字母移动到其 div 的底部

How to use CSS to move letters to the bottom of their divs

css

text-align