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

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需要在顶部对齐。在哪里我想在底部对齐图像。

有什么想法吗？垂直对齐：底部;没有做到这一点，不确定是否因为它与顶部对齐的元素在同一个容器中？但是我没有很多想法，除了将它全部包含在大量的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。