web-dev-qa-db-ja.com

CSSが2つのdivを表示テーブルと同じ高さにする

次のHTMLでは、div .leftと.rightの高さが異なります。高さを定義せずに両方のdivを同じ高さにすることは可能ですか？ display：tableを使用してみましたが、機能しません。

HTML：

<div class="wrap">

    <div class="left">
       Lorem    
    </div>

    <div class="right">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>

</div>

CSS：

.wrap{
    overflow:hidden;
    width:250px;
    display: table;
    border-collapse: collapse;
}


.left{
    width:100px;
    float:left;
    display: table-cell;
    border-bottom:1px solid green;    
}


.right{
    width:150px;
    float:left;
    border-bottom:1px solid red;
    display: table-cell;     
}

jsfiddle：http://jsfiddle.net/fJbTX/1/

htmlcsscss-tables
14
user1355300

floatを削除します。これにより、ドキュメントの通常のフローから要素が取り出され、table-rowとして機能する別のラッパー要素も追加されます。

table-cell、<td> HTML要素のように動作します

これは、tdにはtr親要素が必要であるため、これにはdisplay: table-row親が必要であることを意味します（推論は検証していません）。

.wrap{
    overflow:hidden;
    width:250px;
    display: table;
    border-collapse: collapse;
}

.row {
    display: table-row;
}
.left{
    width: 50%;
    display: table-cell; 
    background-color: #0f0;
}


.right{
    width: 50%;
    background-color: #f00;
    display: table-cell;     
}​

JS Fiddleデモ 。

参照：

23
David Thomas

このようなもの？

http://jsfiddle.net/fJbTX/3/

Floatプロパティを取り出しました

5
Huangism