CSS實現(xiàn)文字包圍圖片的方法

在CSS中，我們可以使用浮動（float）屬性來實現(xiàn)文字包圍圖片的效果，浮動屬性可以將元素放置在其容器元素的左側(cè)或右側(cè)，并允許文本環(huán)繞在該元素周圍。

以下是一個簡單的示例，展示如何使用CSS實現(xiàn)文字包圍圖片：

HTML代碼：

<div class="container">
  <img class="image" src="image.jpg" alt="示例圖片">
  <p class="text">這是一段示例文本，用于展示文字如何包圍圖片，圖片和文本之間的空間可以根據(jù)需要調(diào)整。</p>
</div>

CSS代碼：

.container {
  width: 300px; /* 容器寬度 */
  height: 200px; /* 容器高度 */
  border: 1px solid #000; /* 容器邊框 */
  margin: 20px; /* 容器外邊距 */
}
.image {
  float: left; /* 圖片浮動到左側(cè) */
  width: 100px; /* 圖片寬度 */
  height: 100px; /* 圖片高度 */
  margin-right: 10px; /* 圖片與文本之間的空間 */
}
.text {
  float: right; /* 文本浮動到右側(cè) */
  width: 200px; /* 文本寬度 */
  height: 100px; /* 文本高度 */
}

在這個示例中，我們創(chuàng)建了一個容器元素，其中包含一個圖片元素和一個段落元素，通過CSS，我們將圖片設(shè)置為浮動到左側(cè)，并將文本設(shè)置為浮動到右側(cè)，這樣，文本就會環(huán)繞在圖片的周圍，從而實現(xiàn)文字包圍圖片的效果，我們可以根據(jù)需要調(diào)整圖片和文本之間的空間，以及容器的大小和位置。