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