html - 使一个 div 出现在另一个 div 的底部

Question

我有这个 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 的底部

Answer 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;
}

演示。

Answer 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;
}