css - div コンテナーの下部にスパンを配置する

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

要素を垂直方向に整列すると、要素 (およびその子孫) の下部が、親の下部ではなく、行全体の下部に整列します。