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

【问题标题】：How to use CSS to move letters to the bottom of their divs如何使用 CSS 将字母移动到其 div 的底部
【发布时间】：2019-11-26 21:30:00
【问题描述】：

我有一个例子：https://jsfiddle.net/e9ozyj0w/

我想让字母 g、o、&nbsp; 和 n 与它们的 div 底部对齐，而完成 owhere 与它们对齐。

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

附：一个最小的可重现示例是：

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

【问题讨论】：

How to ask 您需要在此处发布minimal reproducible example，在您的问题中，而不是任何第三方网站。
我不确定你想做什么？但我做了一些实验，请评论：->codepen.io/jaydeeep/pen/QWWXvOj
@jaydeeppatel 感谢您的帮助，但我刚刚在问题中添加了我想要的内容。
你为什么要这样拆分单词？它完全无法访问，并且会损害您的 seo 排名，因为它没有合适的词来搜索
@Pete 这是一个自定义的 html 输入组件，需要单独为字符着色/样式。我可能会将具有相同风格的角色分组。

标签： css text-align

【解决方案1】：

添加到 div.input:

align-items: flex-end;

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

【讨论】：

【解决方案2】：

另一个解决方案很简单，您只需将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>

【讨论】：

【解决方案3】：

试试这个css代码

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

div.prefix {
    display: flex;

}

div.completion {
    position: relative;
}

.completions{
   display: flex;
}

div.char {
    bottom: 0px;
}

【讨论】：