在CSS中，您可以通過使用相對定位（relative positioning）或***定位（absolute positioning）來實現(xiàn)文字在圖片的右邊，下面是一些示例代碼，展示如何實現(xiàn)這一功能：

示例1：相對定位

HTML結構：

<div class="image-with-text">
  <img src="your-image.jpg" alt="圖片描述" />
  <p class="text-right">文本內(nèi)容</p>
</div>

CSS樣式：

.image-with-text {
  position: relative;
  width: 300px; /* 示例寬度 */
  height: 200px; /* 示例高度 */
}
.image-with-text img {
  width: 100%;
  height: 100%;
}
.image-with-text p {
  position: absolute;
  right: 0;
  top: 50%; /* 示例位置 */
  transform: translateY(-50%); /* 居中垂直方向 */
}

示例2：***定位

HTML結構：

<div class="image-with-text">
  <img src="your-image.jpg" alt="圖片描述" />
  <p class="text-right">文本內(nèi)容</p>
</div>

CSS樣式：

.image-with-text {
  position: relative;
  width: 300px; /* 示例寬度 */
  height: 200px; /* 示例高度 */
}
.image-with-text img {
  width: 100%;
  height: 100%;
}
.image-with-text p {
  position: absolute;
  right: 0;
  top: 50%; /* 示例位置 */
  transform: translateY(-50%); /* 居中垂直方向 */
}

示例3：使用Flexbox布局

HTML結構：

<div class="image-with-text">
  <img src="your-image.jpg" alt="圖片描述" />
  <p class="text-right">文本內(nèi)容</p>
</div>

CSS樣式：

.image-with-text {
  display: flex; /* 使用Flexbox布局 */
  align-items: center; /* 垂直居中 */
  justify-content: flex-end; /* 水平居右 */
  width: 300px; /* 示例寬度 */
  height: 200px; /* 示例高度 */
}

這種方法不需要設置position屬性，而是利用Flexbox的align-items和justify-content屬性來實現(xiàn)文本的垂直和水平對齊，這種方法更加簡潔，且易于維護。