JSFiddle - React, Tailwind, and code Playground

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

HTML

<h2>Images Side by Side</h2>
<p>Hình ảnh hiển thị cạnh nhau:</p>

<div class="clearfix">
  <div class="img-container">
  <img src="https://timoday.edu.vn/wp-content/uploads/2021/04/img_5terre.jpg" alt="Italy" style="width:100%">
  </div>
  <div class="img-container">
  <img src="https://timoday.edu.vn/wp-content/uploads/2021/04/img_forest.jpg" alt="Forest" style="width:100%">
  </div>
  <div class="img-container">
  <img src="https://timoday.edu.vn/wp-content/uploads/2021/04/img_mountains.jpg" alt="Mountains" style="width:100%">
  </div>
</div>

<p>Lưu ý rằng chúng tôi cũng sử dụng hack clearfix để xử lý luồng bố cục và chúng tôi thêm thuộc tính  box-sizing để đảm bảo rằng vùng chứa hình ảnh 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;
}

.img-container {
  float: left;
  width: 33.33%;
  padding: 5px;
}

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