CSS中圖片和文字并排顯示的方法

在CSS中，我們可以使用浮動（float）屬性來使圖片和文字并排顯示，浮動屬性可以將元素定位到容器的左側或右側，從而實現(xiàn)并排顯示的效果。

以下是一個簡單的示例，展示如何使用CSS使圖片和文字并排顯示：

HTML代碼：

<div class="container">
  <img class="image" src="image.jpg" alt="圖片">
  <p class="text">這是一段文字，用于描述圖片，文字可以放在圖片的左側或右側，具體取決于CSS樣式的設置。</p>
</div>

CSS代碼：

.container {
  width: 300px; /* 容器寬度 */
  height: 200px; /* 容器高度 */
  position: relative; /* 相對于容器定位圖片和文字 */
}
.image {
  width: 150px; /* 圖片寬度 */
  height: 150px; /* 圖片高度 */
  float: left; /* 圖片浮動到左側 */
  margin-right: 10px; /* 圖片與文字之間的間距 */
}
.text {
  width: 140px; /* 文字寬度 */
  height: 150px; /* 文字高度 */
  float: right; /* 文字浮動到右側 */
}

在這個示例中，我們創(chuàng)建了一個名為container的容器，用于容納圖片和文字，圖片通過float: left屬性浮動到左側，文字通過float: right屬性浮動到右側，我們還設置了圖片和文字的寬度、高度以及它們之間的間距。

使用浮動屬性時，需要確保容器能夠容納圖片和文字，并且它們的總寬度不超過容器的寬度，還需要注意清除浮動，以避免影響其他元素的布局。