网页设计如何将文字放在图片的右边

在网页设计中，将文字置于图片右侧通常涉及HTML和CSS的配合。下面是一种常见的方式：

1. **使用`<figure>`和`<figcaption>`标签**：创建一个包含图片的`<figure>`元素，然后在其内部添加`<figcaption>`作为图释，将其文本放置于图片下方。

<figure>
  <img src="your-image.jpg" alt="Image description">
  <figcaption>这是图片的描述文字</figcaption>
</figure>

2. **浮动布局（Float）**：使用CSS的float属性可以实现图文分隔的效果。例如，将图片设为左浮动，文字则默认会流至左边。

.figure {
  position: relative;
}

.figure img {
  float: left;
  margin-right: 15px; /* 或者你想要的文字与图片之间的间距 */
}

.figure .caption {
  position: absolute;
  bottom: 0;
  right: 0;
}

3. **CSS Grid或Flexbox布局**：如果你希望文字保持在同一行，可以使用CSS Grid将文字和图片放在同一行的不同位置，或者使用Flexbox排列它们。

.container {
  display: grid;
  grid-template-columns: auto 1fr; /* 图片占据剩余空间 */
  gap: 15px;
}

.item {
  display: flex;
  align-items: flex-start;
}

.item img {
  margin-right: 15px;
}

确保在移动设备上查看效果，并考虑添加响应式设计，以适应不同的屏幕尺寸。