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/

如何让div列高度相同？

1 个答案: