Question

我把这个div用作我页面上的信息容器，我想在第一个div的底部做一个更多的阅读按钮但是不能这样做，我尝试了位置：相对和我知道的其他所有方法来完成这个但无法成功。任何建议

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

DEMO

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

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

2 个答案: