主頁
CSS
CSS Float
示例
Tryit: 等高浮動框
執行 ❯
建立您
自己的
網站
×
更改方向
儲存程式碼
更改主題，深色/淺色
前往 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>
