HTML：同一容器中的顶部和底部v形对齐

给这个小东西

我试图在底部对齐“bot”元素，同时将“top”保持在顶部。我选择用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包装或者使用固定的高度（目前它实际上是“最小高度”而不是“高度”和绝对位置）。

像这样：

在所有三个元素上使用定位。在容器上使用相对，在内部div上使用绝对

CSS:

更新：这里有一个使用其他代码示例和相应的CSS。

如下：

在所有三个元素上使用定位。在容器上使用相对，在内部div上使用绝对

CSS:

---

更新：这里有一个使用其他代码示例和适当的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;
}