Question

鉴于以下内容，如何将文本foo放在块div元素的底部？

<div style="width:100px; height:100px">foo</div>

Answer 1

您添加了display: table-cell和vertical-align: bottom：

＆＃13;

div {
  display: table-cell;
  vertical-align: bottom;
  background: red;
}

＆＃13;

<div style="width:100px; height:100px">foo</div>

＆＃13;

使用pseudo-elemet :before添加另一个（高度必须等于div高度）：

＆＃13;

div {
  background: red;
}
div:before {
  content: "";
  display: inline-block;
  vertical-align: bottom;
  position: relative;
  height: 100px;
}

＆＃13;

<div style="width:100px; height:100px">foo</div>

＆＃13;

Answer 2

将它放在一个单独的元素中：

position:absolute;
bottom:0;

并让父position:relative建立新的定位环境。

Example fiddle

Answer 3

尝试使用漂亮而现代的flex-box：

<div style="width:100px; height:100px; display: flex; align-items: flex-end;">foo</div>

请注意，将样式保留在其所在位置是绝对必要的：

.myDiv {
  width:100px;
  height:100px;
  display: flex;
  align-items: flex-end;
}

我知道这种方法并非100％支持，但又是对即将出现的大量答案的又一补充。
而且，那些日子我不会考虑IE8。

将文本定位在块元素的底部

3 个答案: