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

Question

次の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/

Answer 1

を取り出した：

table-cellは、<td> HTML要素

のように振る舞います

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

.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 demo。

参考文献：

• CSS display。

Answer 2

このような何か？

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

私は、ドキュメントの通常の流れのうちの要素をとる、floatを削除し、またtable-rowとして機能するように、別のラッパー要素に追加フロートプロパティに