JSFiddle - React, Tailwind, and code Playground

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

HTML

<h2>Grid of Boxes</h2>
<p>Hộp hiển thị cạnh nhau:</p>

<div class="clearfix">
  <div class="box" style="background-color:#bbb">
  <p>Văn bản trong hộp.</p>
  </div>
  <div class="box" style="background-color:#ccc">
  <p>Văn bản trong hộp.</p>
  </div>
  <div class="box" style="background-color:#ddd">
  <p>Văn bản trong hộp.</p>
  </div>
</div>

<p>Lưu ý rằng chúng tôi cũng sử dụng bản hack clearfix để xử lý luồng bố cục và thêm thuộc tính box-sizing để đảm bảo rằng hộp không bị vỡ do thêm phần đệm. Hãy thử loại bỏ mã này để xem hiệu quả.</p>

CSS

* {
  box-sizing: border-box;
}

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

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