首页
CSS
CSS 浮动
示例
实践：具有相同高度的浮动框
运行 ❯
获取您自己的网站
×
更改方向
保存代码
更改主题，深色/浅色
前往 Spaces
<!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> <h2>Equal Height Boxes</h2> <p>Floating boxes with equal heights:</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>This example not very flexible. It is ok to use CSS height if you can guarantee that the boxes will always have the same amount of content in them, but that's not always the case. If you try the example above on a mobile phone (or resize the browser window), you will see that the second box's content will be displayed outside of the box.</p> <p>Go back to the tutorial and find another solution, if this is not what you want.</p> </body> </html>
