Выполнить »
×
Изменить ориентацию
Открыть на Codepen
Изменить тему, Темная/Светлая
<!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>Блоки одинаковой высоты</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>
