將跨度放在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 example

豎直對準的元件對準元件（及其後代）的底部與底部整條線，而不是底部家長。