将文本放在 div 的底部答案

【问题标题】：Put text at bottom of div将文本放在 div 的底部
【发布时间】：2011-07-14 09:15:21
【问题描述】：

我有 4 个相邻的 DIV，它们都位于屏幕中间。我在每个 div 中有 2 个单词，但我不希望它们出现在顶部，我希望它们出现在 div 的右下角。我该怎么做？

【问题讨论】：

标签： html css

【解决方案1】：

将文本包装在 span 或类似名称中，并使用以下 CSS：

.your-div {
    position: relative;
}

.your-div span {
    position: absolute;
    bottom: 0;
    right: 0;
}

【讨论】：

您还可以使用 css 属性，例如：vertical-align:bottom; 和 float:right;。不能吗？
@Harry vertical-align 仅在元素具有 display: table-cell 时才有效，这在
这很好用……如果你不太在意自己的身高。
不适用于包含 ReactJS 和 Next JS 的 JS 库。有什么解决方法吗？
这是我缺少的 div 位置！谢谢。

【解决方案2】：

<div id="container">
    <div><span>Two Words</span></div>
    <div><span>Two Words</span></div>
    <div><span>Two Words</span></div>
    <div><span>Two Words</span></div>
</div>

#container{
    width:450px;
    height:200px;
    margin:0px auto;
    border:1px solid red;
}

#container div{
    position:relative;
    width:100px;
    height:100px;
    border:1px solid #ccc;
    float:left;
    margin-right:5px;
}
#container div span{
    position:absolute;
    bottom:0;
    right:0;
}

在http://jsfiddle.net/7YTYu/2/查看工作示例

【讨论】：

【解决方案3】：

如果你只有一行文字并且你的 div 有固定的高度，你可以这样做：

div {
    line-height: (2*height - font-size);
    text-align: right;
}

见fiddle。

【讨论】：

【解决方案4】：

感谢@Harry，以下代码对我有用：

.your-div{
   vertical-align: bottom;
   display: table-cell;
}

【讨论】：

这有效，但文本对齐不起作用，文本只是与左侧对齐，我无法更改它

【解决方案5】：

我认为使用弹性框 (compatibility) 比使用绝对位置更好。这是我的纯 CSS 示例。

.container{
  background-color:green;
  height:500px;
  
  /*FLEX BOX */
  display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
}

.elem1{
  background-color:red;
  padding:20px;
  
   /*FLEX BOX CHILD */
 -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: flex-end;
    -ms-flex-item-align: end;
    align-self: flex-end;
 
}

<div class="container">
 TOP OF CONTAINER 
<div class="elem1">
  Nam pretium turpis et arcu. Sed a libero. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci.

Mauris sollicitudin fermentum libero. Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam. Quisque id mi.

Donec venenatis vulputate lorem. Maecenas ullamcorper, dui et placerat feugiat, eros pede varius nisi, condimentum viverra felis nunc et lorem. Curabitur vestibulum aliquam leo.
</div>

</div>

【讨论】：

当底部有问题时，我认为flex-direction: column 通常可以提供更好的帮助
这是因为供应商前缀属性。没有它就没有那么多:)
当您必须添加这样的代码只是为了将内容放在 div 的底部时，您不认为我们已经输掉了这场战斗吗？