实例代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
*{
box-sizing:border-box;
}
.box{
float:left;
width:50%;
height:300px;
padding:50px;
}
.clearfix::after{
content:"";
clear:both;
display:table;
}
</style>
</head>
<body>
<h1>等高框</h1>
<p>有相同高度的浮动框</p>
<div class="clearfix">
<div class="box" style="background-color:#ddd">
<h1>Box 1</h1>
<p>ssome content,some content,ome content,</p>
</div>
<div class="box" style="background-color:#ccc">
<h1>Box 2</h1>
<p>ssome content,some content,ome content,</p>
<p>ssome content,some content,ome content,</p>
<p>ssome content,some content,ome content,</p>
</div>
</div>
<p>这个例子不是很灵活。如果可以保证框中始终有相同数量的内容，则可以使用css高度，但并非总是如此。如果您在手机上尝试上例（或调整浏览器窗口的大小），则会看到第二个框的内容将显示在框的外部</p>
<p>如果这不是您想要的，请返回教程并学习另一个解决方案。</p>
</body>
</html>
运行效果：
评论