html - margin-top から 2 つの要素の真下まで

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>

Pheightスタイルを変更することはh1できませんh2。h3

margin-top:100%（代わりに）試しましmargin-top:100pxたが、これも解決策ではありません。

ありがとう、

Answer 1

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>親の残りの幅をカバーするためにその幅を拡張しないことです。

Answer 2

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>