使一个 div 出现在另一个 div 的底部答案

【问题标题】：making a div appear on bottom of another div使一个 div 出现在另一个 div 的底部
【发布时间】：2013-09-06 21:48:09
【问题描述】：

我将此 div 用作我页面上的信息容器，我想在第一个 div 的底部制作一个阅读更多按钮但不能这样做，我尝试了 position:relative 和我知道的所有其他方法来完成这个但做不到。任何建议

<div class="main_banner" style="margin-left:46px;">
    <center><b><h3 style="color:purple;padding-top:2px;margin-bottom:0">header1</h3></b></center>
    <center><img src="images/pic1.png" width="275px" height="103px" /></center>
    <p class="index_services_p">some text</p>
    <br>
    <a style="padding-top:2px;float:left;padding-left:10px;" href="#" style="float:left">
        <img src="images/read-more.png" width="172px" height="32px" />
    </a>
<div>

任何建议都会被采纳。这里的目标是让始终出现在 main_banner DIV 的底部

【问题讨论】：

<center> 在 1995 年左右被弃用。
这里有一些不推荐使用的标签和无效代码（div 永远不会关闭？）。这要么不完整，要么您不了解问题。我将从一些代码清理开始。
@AndrewClody 只丢失了一个 div，源代码完整，我复制了一个示例
很难理解你的目标是什么。对我来说，在 div 下方似乎有一个阅读更多按钮
@ExplosionPills 用关闭的 DIV 标签重试

标签： html css

【解决方案1】：

代码对您提出的问题没有意义。

但是，您可以通过放置父相对元素和子绝对元素来将一个元素与另一个元素的底部对齐：

HTML

<div>
    Lorem ipsum
    <a href="#">read more</a>
</div>

CSS

div {
    background: lightgreen;
    width: 200px;
    height: 200px;
    position: relative;
}
div a {
    display: block;
    background: lightblue;
    position: absolute;
    bottom: 0;
    right: 0;
}

DEMO.

【讨论】：

【解决方案2】：

HTML..

<div class="main-banner">
BLAH..

<a class="read-more" href="#"></a>

</div>

CSS...

.main-banner{
position: relative;
//other styles.
}

.read-more{
position: absolute;
top: 0px;
right: 0px;
left: 10px;
bottom: 10px;
}

【讨论】：