Cách sắp xếp song song các hình ảnh

Học cách sử dụng CSS để sắp xếp song song các hình ảnh.

Cách đặt hình ảnh dọc ngang

Bước 1 - Thêm HTML:

<div class="row">
  <div class="column">
    <img src="img_snow.jpg" alt="Snow" style="width:100%">
  </div>
  <div class="column">
    <img src="img_forest.jpg" alt="Forest" style="width:100%">
  </div>
  <div class="column">
    <img src="img_mountains.jpg" alt="Mountains" style="width:100%">
  </div>
</div>

Bước 2 - Thêm CSS:

Cách sử dụng CSS float Thuộc tính tạo hình ảnh dọc ngang:

Mô hình nổi

/* Ba container hình ảnh (bốn container hình ảnh sử dụng 25%, hai container hình ảnh sử dụng 50%, v.v.) */
.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}
/* Xóa nổi sau container hình ảnh */
.row::after {
  content: "";
  clear: both;
  display: table;
}

Thử ngay

Cách sử dụng CSS flex Thuộc tính tạo hình ảnh dọc ngang:

Mô hình Flexbox

.row {
  display: flex;
}
.column {
  flex: 33.33%;
  padding: 5px;
}

Thử ngay

Lưu ý:Flexbox không hỗ trợ Internet Explorer 10 và các phiên bản sớm hơn. Việc sử dụng float hoặc flex để tạo bố cục ba cột phụ thuộc vào bạn. Tuy nhiên, nếu bạn cần hỗ trợ IE10 và các phiên bản thấp hơn, bạn nên sử dụng nổi.

Lưu ý:Nếu bạn muốn biết thêm thông tin về mô hình Flexbox, hãy đọc Hướng dẫn CSS Flexbox。

Thêm khả năng phản hồi

Hoặc, bạn có thể thêm phương tiện truy vấn để hình ảnh được堆叠 ở chiều rộng màn hình cụ thể thay vì dọc ngang.

Ví dụ sau sẽ d堆叠 hình ảnh khi chiều rộng màn hình là 500px hoặc nhỏ hơn:

Mô hình phản hồi

/* Lưới响应 - làm cho ba cột chồng lên nhau thay vì dọc ngang */
@media screen and (max-width: 500px) {
  .column {
    width: 100%;
  }
}

Thử ngay

Nếu bạn muốn biết thêm thông tin về phương tiện truy vấn, hãy đọc Hướng dẫn CSS phương tiện truy vấn。

Trang liên quan

Hướng dẫn:CSS Hình ảnh

Hướng dẫn:Hướng dẫn CSS nổi

Hướng dẫn:CSS Thư viện hình ảnh