如何讓div列高度相同？

Question

我試圖理解如何在包裝器中將兩個div放在彼此旁邊並且讓它們兩個列div始終匹配高度，即使一個具有比另一個更多的內容，所有都沒有對列應用嚴格的高度。 我嘗試過使用height:100%並且似乎不起作用，這里是代碼/小提琴來顯示我的意思。 有誰知道我在說什么以及如何使這個工作？

   <div class="wrapper">
        <div class="left"><img src="http://i.stack.imgur.com/Sv4BC.png"/></div>
        <div class="right">
            <div class="stretch">
                stretch to height: 100%
            </div>
        </div>    
        <div class="fix"></div>
    </div>

CSS：

.wrapper{background:#eee;padding:10px;}
.stretch{height:100%;}
.left,.right{float:left;padding:5px;background:#FFF;}
.fix{clear:both;}
.left img{width:200px;}

小提琴:(兩列應該相同） https://jsfiddle.net/19zsdswt/1/

Answer 1

我認為問題在於嘗試添加height: 100%到浮動的div。

您可以嘗試使用表格，表格單元格關系，如下所示：

.wrapper{display: table; background:#eee;padding:10px;}
.stretch{height:100%;}
.left,.right{display: table-cell; padding:5px;background:#FFF;}
/* .fix{clear:both;} */
.left img{width:200px;}

我在這里更新了你的小提琴 - https://jsfiddle.net/sfyt9skx/