您需要確保在設置div .icon的位置時,爲其父div聲明一個位置。當爲元素設置位置值時,它將計算它相對於聲明位置的下一個直接父div的位置。如果.section沒有設置位置,那麼.icon會計算它相對於.container的位置(如果容器已設置位置)。
<div class="container">
<div class="section">
<div class="text">
<b>Case 1:</b>
Gray has lower height than orange
</div>
<div class="icon">
</div>
</div>
<div class="section">
<div class="text tall">
<b>Case 2:</b>
Gray has bigger height than orange
</div>
<div class="icon">
</div>
</div>
</div>
body {
background-color: #333333;
margin: 0;
}
.container {
margin: 0 auto;
width: 80%;
}
.section {
position:relative;
background-color: #FFFFFF;
min-height: 200px;
margin-bottom: 200px;
width: 100%;
}
.text {
background-color: #999999;
height: 100px;
width: 100%;
text-align: right;
position:absolute;
left:0;
bottom:0;
}
.tall {
height: 300px;
}
.icon {
width: 250px;
height: 250px;
background-color: #FF9933;
border: #000000 2px dashed;
z-index: 1;
position: absolute;
right:0;
bottom:0;
}
謝謝,它的工作原理。除了我從'.text'中刪除'padding-right:270px;',因爲我需要將其中的內容居中。 – Taosique
@Taosique好的,它可以滿足你的需要,歡迎你的光臨) –