Cách - Căn chỉnh hình ảnh cạnh nhau
Tìm hiểu cách căn chỉnh hình ảnh cạnh nhau bằng CSS.
Thư viện hình ảnh cạnh nhau
Cách đặt hình ảnh cạnh nhau
Bước 1) Thêm HTML:
Ví dụ
<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 tạo hình ảnh cạnh nhau bằng thuộc tính CSS float
:
Ví dụ nổi
/* Three image containers (use 25% for four, and 50% for two, etc) */
.column {
float: left;
width: 33.33%;
padding:
5px;
}
/* Clear floats after image containers */
.row::after {
content: "";
clear: both;
display: table;
}
Hãy tự mình thử » Cách tạo hình ảnh cạnh nhau bằng thuộc tính CSS flex
:
Lưu ý: Flexbox không được hỗ trợ trong Internet Explorer 10 và các phiên bản cũ hơn. Tùy thuộc vào việc bạn muốn sử dụng float hay flex để tạo bố cục ba cột. Tuy nhiên, nếu bạn cần hỗ trợ cho IE10 trở xuống thì nên sử dụng float.
Mẹo: Để tìm hiểu thêm về Mô-đun bố cục hộp linh hoạt, hãy đọc chương CSS Flexbox của chúng tôi .
Thêm khả năng phản hồi
Theo tùy chọn, bạn có thể thêm truy vấn phương tiện để làm cho các hình ảnh xếp chồng lên nhau thay vì nổi cạnh nhau, trên một chiều rộng màn hình cụ thể.
Ví dụ sau sẽ xếp chồng các hình ảnh theo chiều dọc trên màn hình rộng 500px trở xuống:
Ví dụ đáp ứng
/* Responsive layout - makes the three columns stack on top of each other
instead of next to each other */
@media screen and (max-width: 500px) {
.column {
width: 100%;
}
}
Hãy tự mình thử »Để tìm hiểu thêm về truy vấn phương tiện, hãy đọc Hướng dẫn truy vấn phương tiện CSS của chúng tôi.
Trang liên quan
Để tìm hiểu thêm về cách tạo kiểu cho hình ảnh, hãy đọc Hướng dẫn về hình ảnh CSS của chúng tôi.
Để tìm hiểu thêm về CSS Float, hãy đọc Hướng dẫn CSS Float của chúng tôi.
Để tìm hiểu cách tạo thư viện hình ảnh bằng CSS, hãy đọc Hướng dẫn về Thư viện Hình ảnh CSS của chúng tôi.