CSS圖文混排是一種常用的網(wǎng)頁排版技巧，它可以讓文字和圖片在網(wǎng)頁上更加靈活地呈現(xiàn)，如何制作CSS圖文混排呢？

我們需要在HTML中定義好圖片和文字的位置，可以使用div元素來創(chuàng)建一個容器，然后在容器中放置圖片和文字。

<div class="image-text-container">
  <img src="image.jpg" alt="圖片">
  <p>這是一段文字</p>
</div>

在CSS中定義好容器和圖片、文字的樣式。

.image-text-container {
  position: relative;
  width: 300px;
  height: 200px;
  border: 1px solid #000;
}
.image-text-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.image-text-container p {
  position: absolute;
  top: 50px;
  left: 0;
  width: 100%;
  text-align: center;
}

在上面的CSS代碼中，我們使用了position屬性來控制圖片和文字的位置，position:absolute表示圖片和文字的位置相對于其***近的定位祖先（即***近的父元素），如果沒有定位祖先，則相對于初始包含塊（即整個網(wǎng)頁），top和left屬性則表示圖片和文字距離其***近的定位祖先的頂部和左側(cè)的距離，width和height屬性則表示圖片和文字的寬度和高度，text-align屬性則表示文字的排列方式。

我們可以在網(wǎng)頁上調(diào)用這個容器，并傳入相應(yīng)的圖片路徑和文字內(nèi)容即可。

<div class="image-text-container" style="background-color: #fff;">
  <img src="image.jpg" alt="圖片">
  <p>這是一段文字</p>
</div>

在上面的代碼中，我們使用了style屬性來設(shè)置容器的背景顏色，這樣可以讓文字和圖片更加突出地呈現(xiàn)在網(wǎng)頁上，我們也可以調(diào)整容器的寬度和高度來適應(yīng)不同的頁面布局需求。