Hướng dẫn how do you arrange images in html? - làm thế nào để bạn sắp xếp hình ảnh trong html?

Tìm hiểu làm thế nào để căn chỉnh hình ảnh cạnh nhau với CSS.

Bộ sưu tập hình ảnh cạnh nhau

Hãy tự mình thử »

Cách đặt hình ảnh cạnh nhau

Bước 1) Thêm HTML:

Thí dụ

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;
 

   

 

   

 

   

 

Bước 2) Thêm CSS:

Cách tạo hình ảnh cạnh nhau với thuộc tính CSS float:

Ví dụ nổi

/ * Ba thùng chứa hình ảnh (sử dụng 25% cho bốn và 50% cho hai, v.v.) */ .Column {& nbsp; Phao: trái; & nbsp; Chiều rộng: 33,33%; & nbsp; Đệm: 5px;}
.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}

/ * Xóa phao sau các thùng chứa hình ảnh */. Hàng :: sau {& nbsp; nội dung: ""; & nbsp; Rõ ràng: cả hai; & nbsp; Hiển thị: Bảng;}
.row::after {
  content: "";
  clear: both;
  display: table;
}

Hãy tự mình thử »

Cách đặt hình ảnh cạnh nhau

Bước 1) Thêm HTML:

Thí dụ
  display: flex;
}

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;
  flex: 33.33%;
  padding: 5px;
}

Hãy tự mình thử »

Cách đặt hình ảnh cạnh nhau Flexbox is not supported in Internet Explorer 10 and earlier versions. It is up to you if you want to use floats or flex to create a three-column layout. However, if you need support for IE10 and down, you should use float.

Bước 1) Thêm HTML: To learn more about the Flexible Box Layout Module, read our CSS Flexbox chapter.

Thí dụ

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;

Bước 2) Thêm CSS:

Cách tạo hình ảnh cạnh nhau với thuộc tính CSS float:

Ví dụ nổi
@media screen and (max-width: 500px) {
  .column {
    width: 100%;
  }
}

Hãy tự mình thử »

/ * Ba thùng chứa hình ảnh (sử dụng 25% cho bốn và 50% cho hai, v.v.) */ .Column {& nbsp; Phao: trái; & nbsp; Chiều rộng: 33,33%; & nbsp; Đệm: 5px;}

/ * Xóa phao sau các thùng chứa hình ảnh */. Hàng :: sau {& nbsp; nội dung: ""; & nbsp; Rõ ràng: cả hai; & nbsp; Hiển thị: Bảng;}

Cách tạo hình ảnh cạnh nhau với thuộc tính CSS flex:

Ví dụ về flexbox

Bước 3) Thêm JavaScript:

Tạo chế độ xem lưới có thể điều khiển bằng JavaScript:

Thí dụ

Hãy tự mình thử »

Bước 3) Thêm JavaScript:

Tạo chế độ xem lưới có thể điều khiển bằng JavaScript:

Thí dụ

// Nhận các phần tử với class = "cột" var fements = document.getelementsByClassName ("cột");
 

   

   

   

   

   

   

   

 

   

   

   

   

   

   

 

   

   

   

   

   

   

   

 

   

   

   

   

   

   

 

// khai báo một biến "vòng lặp" i;

// hình ảnh toàn chiều rộng Một () {& nbsp; & nbsp; for (i = 0; i

Thí dụ

// Nhận các phần tử với class = "cột" var fements = document.getelementsByClassName ("cột");
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/ * Tạo hai cột bằng nhau nằm cạnh nhau */ .column {& nbsp; Flex: 50%; & nbsp; Đệm: 0 4px;}
.column {
  flex: 50%;
  padding: 0 4px;
}

.Column img {& nbsp; Biên độ-top: 8px; & nbsp; dọc-align: giữa;}
  margin-top: 8px;
  vertical-align: middle;
}

Hãy tự mình thử »

Bước 3) Thêm JavaScript:

Tạo chế độ xem lưới có thể điều khiển bằng JavaScript:

Thí dụ

124
2
4

// Nhận các phần tử với class = "cột" var fements = document.getelementsByClassName ("cột");
// Get the elements with class="column"
var elements = document.getElementsByClassName("column");

// khai báo một biến "vòng lặp" i;
var i;

// hình ảnh toàn chiều rộng Một () {& nbsp; & nbsp; for (i = 0; i function one() {
  for (i = 0; i < elements.length; i++) {
    elements[i].style.flex = "100%";
  }
}

// hai hình ảnh cạnh theo chức năng hai () {& nbsp; & nbsp; for (i = 0; i function two() {
  for (i = 0; i < elements.length; i++) {
    elements[i].style.flex = "50%";
  }
}

// Bốn hình ảnh cạnh theo chức năng bốn () {& nbsp; for (i = 0; i function four() {
  for (i = 0; i < elements.length; i++) {
    elements[i].style.flex = "25%";
  }
}

Hãy tự mình thử »