css - 在 div 容器的底部放置一个 span

Question

我在下面有这段代码。我预计span被放置在底部div，但它仍然在top.. 为什么？

<div><span>jfalsf</span></div>

---

div {
  width: 500px;
  height: 400px;
  background: yellow;
}
span {
  background: red;
  vertical-align: bottom;
}

Answer 1

改用定位：

div {
    width: 500px;
    height: 400px;
    background: yellow;
    position:relative;
}
span {
    background: red;
    position:absolute;
    bottom:0;
}

jsFiddle 示例

垂直对齐元素将元素（及其后代）的底部与整行的底部对齐，而不是与父元素的底部对齐。