CSS中設(shè)置圖片兩邊的文字，可以通過(guò)使用浮動(dòng)（float）或者彈性布局（flexbox）來(lái)實(shí)現(xiàn)。

1、使用浮動(dòng)（float）實(shí)現(xiàn)圖片兩邊的文字

在HTML中，我們可以將圖片和文字分別放在不同的div中，然后通過(guò)CSS設(shè)置圖片的浮動(dòng)屬性，使圖片能夠靠邊顯示，從而實(shí)現(xiàn)圖片兩邊的文字效果。

HTML:
<div class="image-wrapper">
  <img src="image.jpg" alt="圖片">
</div>
<div class="text-wrapper">
  <p>這是圖片左邊的文字</p>
  <p>這是圖片右邊的文字</p>
</div>

CSS:

.image-wrapper {
  float: left; /* 或者使用 right 來(lái)使圖片顯示在右邊 */
}
.text-wrapper {
  clear: both; /* 清除浮動(dòng) */
}

2、使用彈性布局（flexbox）實(shí)現(xiàn)圖片兩邊的文字

彈性布局是一種更現(xiàn)代、更靈活的布局方式，它可以讓圖片和文字在同一容器中自由排列。

HTML:
<div class="container">
  <img src="image.jpg" alt="圖片">
  <p>這是圖片左邊的文字</p>
  <p>這是圖片右邊的文字</p>
</div>

CSS:

.container {
  display: flex; /* 啟用彈性布局 */
  align-items: center; /* 垂直居中 */
}

在彈性布局中，圖片和文字會(huì)自動(dòng)排列在容器的兩側(cè)，從而實(shí)現(xiàn)圖片兩邊的文字效果，我們還可以使用justify-content屬性來(lái)控制圖片和文字之間的間距。

.container {
  justify-content: space-between; /* 圖片和文字之間的間距均勻分布 */
}