JSFiddle - React, Tailwind, and code Playground

by Tìm ở đây Khoá học CNTT

HTML

<h2>Equal Height Boxes</h2>
<p>Hiển thị hộp với chiều cao bằng nhau:</p>

<div class="clearfix">
  <div class="box" style="background-color:#bbb">
  <h2>Box 1</h2>
  <p>Nội dung trong hộp</p>
  </div>
  <div class="box" style="background-color:#ccc">
  <h2>Box 2</h2>
  <p>Nội dung trong hộp</p>
  <p>Nội dung trong hộp</p>
  <p>Nội dung trong hộp</p>
  </div>
</div>

<p>Ví dụ này không linh hoạt lắm. Có thể sử dụng CSS height nếu bạn có thể đảm bảo rằng các hộp sẽ luôn có cùng một lượng nội dung trong chúng, nhưng không phải lúc nào cũng vậy. Nếu bạn thử ví dụ trên trên điện thoại di động (hoặc thay đổi kích thước cửa sổ trình duyệt), bạn sẽ thấy rằng nội dung của hộp thứ hai sẽ được hiển thị bên ngoài hộp. </p>
<p> Quay lại hướng dẫn và tìm giải pháp khác, nếu đây không phải là điều bạn muốn.</p>

</body>
</html>

CSS

* {
  box-sizing: border-box;
}

.box {
  float: left;
  width: 50%;
  padding: 50px;
  height: 300px;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}