在CSS中，使用子元素圖片排版非常常見。它的主要功能是將不同的圖像放在不同的元素中，以便更好地進行排版和布局。

<div class="container">
<div class="box">
<img src="image1.jpg">
</div>
<div class="box">
<img src="image2.jpg">
</div>
<div class="box">
<img src="image3.jpg">
</div>
</div>

在上述代碼中，我們創建了一個父元素為“container”的div元素，并在其中包含了三個具有相同類名“box”的div。每個“box”中包含一個圖像元素。我們可以使用CSS來控制圖像的大小和位置。

.container {
display: flex;
flex-wrap: wrap;
}
.box {
flex: 1 0 300px;
margin: 10px;
}
.box img {
width: 100%;
height: auto;
}

在這里，我們使用了flexbox布局來控制元素的位置。設置了“flex-wrap:wrap”可以使元素在父元素中自動換行。我們還使用了“flex:1 0 300px”來定義每個“box”元素的大小和彈性?？梢允褂谩癿argin”屬性來確定元素之間的間距。最后，我們使用“width:100%”和“height:auto”來控制圖像大小。

總之，使用CSS子元素圖片排版可以讓設計師更好地組織圖像，為網站帶來更好的排版和布局效果。