CSS四張圖片田字形設(shè)置

在CSS中，我們可以通過使用***定位來將四張圖片設(shè)置為田字形，以下是一個示例代碼：

HTML代碼：

<div class="container">
  <img class="image1" src="image1.png" />
  <img class="image2" src="image2.png" />
  <img class="image3" src="image3.png" />
  <img class="image4" src="image4.png" />
</div>

CSS代碼：

.container {
  position: relative;
  width: 200px;
  height: 200px;
}
.image1 {
  position: absolute;
  top: 0;
  left: 0;
}
.image2 {
  position: absolute;
  top: 0;
  right: 0;
}
.image3 {
  position: absolute;
  bottom: 0;
  left: 0;
}
.image4 {
  position: absolute;
  bottom: 0;
  right: 0;
}

在這個示例中，我們創(chuàng)建了一個名為container的容器，并將四張圖片分別設(shè)置為***定位，通過調(diào)整top、left、right和bottom屬性，我們可以將圖片放置在容器的不同位置，從而實現(xiàn)田字形布局，在示例中，我們假設(shè)圖片的寬度和高度都為100px，因此容器的大小為200px x 200px，您可以根據(jù)自己的需求調(diào)整容器和圖片的大小。