-4

この 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 の下部に表示されるようにすることです。

4

2 に答える 2

2

コードは、あなたが求めている質問には意味がありません。

ただし、親を相対的に配置し、子を絶対的に配置することで、要素を別の要素の下部に揃えることができます。

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

デモ。

于 2013-09-06T13:41:54.120 に答える
0

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;
}
于 2013-09-06T13:46:57.497 に答える