将文字放在div的底部

72

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

html css

148

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

.your-div {
    position: relative;
}

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

— 亚历克斯
source

5

您还可以使用CSS属性，例如：vertical-align:bottom;和float:right;。不能吗

— 哈里·乔伊

23

@Harryvertical-align仅在元素具有display: table-cell<IE8中不支持的元素时起作用。

— Alex

4

如果您不太在意自己的身高，这非常有用。

— courtsimas

在包括ReactJS和Next JS的JS库上不起作用。任何解决方法？

— Dheeraj M Pai

它是我缺少的div位置！谢谢。

— MrrMan

8

<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/中查看工作示例

— 侯赛因
source

6

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

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

见小提琴。

— Melhosseiny
source

6

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

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

— meck373
source

3

我认为使用弹性盒（兼容性）比绝对位置更好。这是我在纯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>

展开摘要

— Skylin R
source

1

当遇到底部问题时，我认为flex-direction: column通常可以提供帮助

— Fanky

这是由于供应商前缀的属性。没有那个，它就不那么多了：)

— Skylin R

当您不得不添加诸如此类的代码以将内容放到div的底部时，您不认为我们输了吗？

— Yaza