css - divの同じ高さを設定する方法

Question

これが私の状況です

HTML

<div id="content">
    <div id="item1">
        <div class="empty">&nbsp;</div>
        <div class="empty">&nbsp;</div>
        <div class="empty">&nbsp;</div>
    </div>
    <div id="item2">
        <div class="empty">&nbsp;</div>
    </div>
</div>

CSS

.empty
{
    width: 100px;
    height: 100px;
    background-color: red;
}

#item1
{
    float: left;
    padding: 10px;
    background-color: green;
}

#item2
{
    float: left;
    padding: 10px;
    background-color: blue;
}

#content
{
    padding: 10px;
    background-color: pink;
    overflow: hidden;
}

これはhttp://jsfiddle.net/59qEt/3/のようです

だから私の質問は: スタイルを #item2 に設定する必要があるのは、#item1 と同じ高さですか?

どんな助けでも大歓迎です。

score 5 · Accepted Answer

これにはdisplay:table-cellプロパティを使用できます。float:left次のように書き込みを削除します。

#item1, #item2
{
    display:table-cell;
}

これをチェックしてくださいhttp://jsfiddle.net/59qEt/5/

IE8以降まで動作することに注意してください。

score 0 · Accepted Answer

css から item2 を削除します `

<div id="item1">
    <div class="empty">&nbsp;</div>
    <div class="empty">&nbsp;</div>
    <div class="empty">&nbsp;</div>
</div>
<div id="item1">
    <div class="empty">&nbsp;</div>
</div>

`

score 0 · Accepted Answer

項目 1 ではdivそれぞれ3 つdivを使用してpadding:10px;おり、項目 2 ではちょうど 1 でdiv2 つのことができます 1 項目 2 では 3divとオプション2 を追加します。height項目 2 と項目 2 の子は空です

score 0 · Accepted Answer

次のようなことを試すことができます：

#item2 > div {
    padding-bottom:200px;
}

これはフィドルです：

http://jsfiddle.net/59qEt/24/

score -1 · Accepted Answer

JavaScript の 2 つの文字列を追加するだけですhttp://jsfiddle.net/59qEt/20/ すべてのブラウザで動作します

css - divの同じ高さを設定する方法

5 に答える 5

Related

Reference