CSS-将文字放在di的底部

我彼此相邻有4个DIV,它们都位于屏幕中间。 每个div中有2个字,但我不希望它们位于顶部,我希望它们出现在div的右下角。 我怎样才能做到这一点?

asked 2019-10-09T10:11:07Z
5个解决方案
116 votes

将文字换成span或类似文字,然后使用以下CSS ...

.your-div {
    position: relative;
}

.your-div span {
   position: absolute;
   bottom: 0;
   right: 0;
}
alex answered 2019-10-09T10:11:18Z
7 votes
<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/]中查看工作示例

Hussein answered 2019-10-09T10:11:42Z
6 votes

如果只有一行文本并且div具有固定的高度,则可以执行以下操作:

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

见小提琴。

melhosseiny answered 2019-10-09T10:12:11Z
4 votes

感谢@Harry,以下代码对我有用:

.your-div{
   vertical-align: bottom;
   display: table-cell;
}
meck373 answered 2019-10-09T10:12:35Z
2 votes

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

<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>
<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>

Skylin R answered 2019-10-09T10:13:07Z
translate from https://stackoverflow.com:/questions/5288336/put-text-at-bottom-of-div