跑步 ”
×
改变方向
在 Codepen 上打开
更改主题，深色/浅色
<!DOCTYPE html> <html> <head><meta http-equiv="content-security-policy" content="script-src 'none'"> <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>Блоки одинаковой высоты</h2> <p>Плавающие блоки одинаковой высоты:</p> <div class="clearfix"> <div class="box" style="background-color:#bbb"> <h2>Блок 1</h2> <p>Какое-то содержание, какое-то содержание, какое-то содержание</p> </div> <div class="box" style="background-color:#ccc"> <h2>Блок 2</h2> <p>Какое-то содержание, какое-то содержание, какое-то содержание</p> <p>Какое-то содержание, какое-то содержание, какое-то содержание</p> <p>Какое-то содержание, какое-то содержание, какое-то содержание</p> </div> </div> <p>Этот пример не очень гибкий. Можно использовать высоту CSS, если вы можете гарантировать, что в полях всегда будет одинаковое количество содержимого, но это не всегда так. Если вы попробуете приведенный выше пример на мобильном телефоне (или измените размер окна браузера), вы увидите, что содержимое второго поля будет отображаться за пределами поля.</p> <p>Вернитесь к учебнику и найдите другое решение, если оно вам не подходит.</p> </body> </html>
