HTML：頂部和底部v-align在同一個容器中

Question

給出這個小小的一塊。

http://jsfiddle.net/4gb6K/7/

我試圖在底部對齊「殭屍」元素，同時保持「頂」在上面。我選擇使用div來創建這個小例子來嘗試我自己的一些事情，所以生病使用，而不是實際的，但同樣的概念。

實際的HTML看起來更像是：

<a class="box" href="single.html" title="Link to Single Page"> 
     <h4>Cras vestibulum</h4> 
     <p>Cras vestibulum lorem et dui mollis sed posuere leo semper.</p> 
     <img alt="" src="images/box_ph.png"> 
    </a> 

A是容器，H4和P需要在頂部V-對齊。我想在底部對齊圖像。

任何想法？垂直對齊：底部;不會執行這個技巧，不確定是否因爲它與頂部對齊元素位於同一個容器中？但除了用大量的HTML/CSS或固定的高度（目前實際上是「最小高度」而不是「高度」和絕對位置）來包裝它之外，我沒有太多的想法。

Answer 1

這個樣子：在所有三個要素jsFiddle example

使用相對定位在容器上，並且絕對在內的div

CSS：。

.outer { 
    height: 600px; 
    border: 1px solid black; 
    position: relative; 
} 
.top{ 
    position: absolute; 
    border: 1px solid black; 
    top: 0; 
} 
.bot{ 
    border: 1px solid black; 
    position:absolute; 
    bottom:0; 
} 

更新：這是一個jsFiddle example使用您的其他代碼示例與適當的CSS。