HTML:顶部和底部在同一个容器中v对齐

Question

给定这个小片段。

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

我试图将底部的"bot"元素对齐，同时将顶部保持在顶部。我选择用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对齐。我想在底部对图像进行v形对齐。

有什么想法吗？如垂直对齐：底部；不知道是不是因为它和顶部对齐的元素在同一个容器中？但我没有太多想法，除了用大量的HTML/CSS包装它，或者使用固定的高度（目前它实际上是"最小高度"，而不是"高度"和绝对位置。

Answer 1

如下：jsFiddle示例。

在所有三个元素上使用定位。在容器上是相对的，在内部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示例，使用您的其他代码示例和适当的CSS。