CSS如何讓文字圍繞圖片排列

在CSS中，我們可以使用浮動（float）屬性來讓文字圍繞圖片排列，浮動屬性可以將元素定位到容器的左側(cè)或右側(cè)，并允許文本環(huán)繞其周圍。

以下是一個簡單的示例，展示如何使用CSS讓文字圍繞圖片排列：

HTML代碼：

<div class="container">
  <img class="image" src="image.jpg" alt="圖片">
  <p class="text">這是一段文字，它將會圍繞圖片排列，圖片在左側(cè)，文字在右側(cè)，文字可以自動換行，以適應(yīng)容器的寬度。</p>
</div>

CSS代碼：

.container {
  width: 500px; /* 容器寬度 */
  margin: 0 auto; /* 居中容器 */
}
.image {
  float: left; /* 圖片浮動到左側(cè) */
  margin-right: 10px; /* 圖片與文字之間的間隔 */
}
.text {
  float: right; /* 文字浮動到右側(cè) */
  text-align: justify; /* 文字兩端對齊 */
}

在這個示例中，我們創(chuàng)建了一個容器，其中包含一個圖片和一個段落，圖片被設(shè)置為浮動到左側(cè)，而文字則被設(shè)置為浮動到右側(cè)，這樣，文字就會自動環(huán)繞圖片排列，形成了一種有趣的視覺效果，我們還使用了文本對齊（text-align）屬性來確保文字兩端對齊，使其更加美觀。

需要注意的是，浮動屬性可能會影響元素的布局順序，在使用浮動屬性時，需要謹(jǐn)慎考慮其對頁面布局的影響。