HTML：顶部和底部v-在同一容器中对齐 [英] HTML: Top and Bottom v-align in same container

问题描述

鉴于这个小件。

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

我试图在底部对齐bot元素，同时保持顶部在顶部。我选择用div来绘制这个小例子，尝试一些我自己的东西，所以病态使用，而不是实际的，同样的概念。

I am attempting to align the "bot" element at the bottom while keeping the "top" at top. I choose to draw up this little example with div's to try a few things my self, so ill use that instead of the actual one, same concept though.

实际html外观更像：

Actual html looks more like:

    <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-对齐。

A is the container, H4 and P needs to v-align at top. where I would like to v-align image at bottom.

任何想法？ as vertical-align：bottom;不做的伎俩，不确定是否是因为它是在一个顶部对齐的元素在同一个容器？但我没有太多的想法，除了包装所有的大量的HTML / CSS或固定的高度（目前它实际上是最小高度，而不是高度和绝对的位置。

Any ideas? As vertical-align: bottom; doesn't do the trick, not sure if that is because it is in the same container as a top aligned element? But I don't have many ideas other than wrapping it all in huge amounts of HTML/CSS or going with fixed heights (currently it is actually "min-height" instead of "height" and absolute placements.

推荐答案

像这样： jsFiddle example 。

Like this: jsFiddle example.

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

Use positioning on all three elements. Relative on the container, and absolute on the inner divs.

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。

Update: Here's a jsFiddle example using your other code example with the appropriate CSS.

这篇关于HTML：顶部和底部v-在同一容器中对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！