从下面的小提琴可以看出,我有两个div,包含在一个父div,已经拉伸包含大div,我的目标是使这些孩子的div在高度相等。
解决方法
解决方案是使用display:table-cell使这些元素内联,而不是使用display:inline-block或float:left。
div#container { padding: 20px; background: #F1F1F1 } .content { width: 150px; background: #ddd; padding: 10px; display: table-cell; vertical-align: top; } .text { font-family: 12px Tahoma,Geneva,sans-serif; color: #555; }
<div id="container"> <div class="content"> <h1>Title 1</h1> <div class="text">Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. <br>Sample Text. Sample Text. Sample Text. <br>Sample Text. <br> </div> </div> <div class="content"> <h1>Title 2</h1> <div class="text">Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text.</div> </div> </div>