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

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