邊距兩個元素

Question

在下面簡單的CSS代碼的直筒，我想的h1與p底部平直的底部（h1不應該p下，像在我的代碼）。

<div id="sqrs" style="width:200px; height:200px; border:1px solid BLACK;"> 
<p style="width:100px; height:100px; background-color:BLUE; float:right;">blue</p> 
<h1 style="background-color:YELLOW; margin-top:100px;">yellow</h1> 
</div> 

P風格不能改變，我不知道h1的height（因爲它可以h2，h3 ...）

我試過margin-top:100%（而不是margin-top:100px），但是這不是解決方案。

感謝，

Answer 1

見http://jsfiddle.net/3sWEt/3/

您可以設置position:relative到容器和position:absolute與bottom:0到<h1>：

CSS：

#sqrs{ 
    width:200px; height:200px; border:1px solid black; 
    overflow:hidden; 
} 
#sqrs>*{ 
    height:100px; 
} 
#sqrs>p{ 
    width:100px; background-color:blue; float:right; 
} 
#sqrs>div{ 
    overflow:hidden; 
    position:relative; 
} 
#sqrs>div>h1{ 
    background-color:yellow; 
    position:absolute; 
    bottom:0; 
    width:100%; 
} 

HTML：

<div id="sqrs"> 
    <p>blue</p> 
    <div><h1>yellow</h1></div> 
</div> 

Answer 2

見http://jsfiddle.net/3sWEt/1/

#sqrs{ 
    width:200px; height:200px; border:1px solid black; 
    line-height:100px; 
    text-align:right; 
} 
#sqrs>*{ 
    text-align:left; 
    line-height:normal; 
} 
#sqrs>p{ 
    width:100px; height:100px; background-color:blue; float:right; 
} 
#sqrs>h1{ 
    background-color:yellow; 
    display:inline-block; 
    vertical-align:bottom; 
} 

您可以使用相同的line-height，display:inline-block和vertical-align:bottom。

但問題是，<h1>不擴展它的寬度來覆蓋它的父母的剩餘寬度。