求助：如何用Flex或其他方法将图片置于HTML文本右侧？

核心实现思路 #

通过给父容器设置display: flex，配合子元素的空间分配与排列规则，就能快速实现文本左、图片右的布局效果。

正确代码示例 #

HTML结构

<div class="content-wrap">
  <div class="text-block">
    <p>这里是要放在左侧的文本内容，支持多行显示，可根据需求调整内容长度。</p>
    <p>添加更多段落也能保持布局的稳定性，不会出现错位或溢出问题。</p>
  </div>
  <div class="image-block">
    <img src="你的图片URL" alt="图片描述文本">
  </div>
</div>

CSS样式

.content-wrap {
  display: flex;
  align-items: center; /* 垂直方向居中对齐，可按需改为flex-start/flex-end */
  gap: 24px; /* 文本与图片的间距，可自定义 */
  max-width: 1200px; /* 限制容器最大宽度，避免内容过宽 */
  margin: 0 auto; /* 让容器水平居中 */
}

.text-block {
  flex: 1; /* 让文本区域自动占据剩余空间，适配不同屏幕宽度 */
}

.image-block img {
  width: 320px; /* 固定图片宽度，也可使用百分比实现响应式 */
  height: auto; /* 保持图片原始比例 */
}

你之前实现失败的常见问题 #

• 父容器未设置display: flex，Flex布局未生效
• 子元素顺序颠倒，把图片放在了文本标签之前
• 未给文本区域添加flex: 1，导致文本与图片的宽度分配不合理
• 图片未设置宽度限制，撑破容器导致布局混乱

替代实现方案（非Flex版） #

如果不想用Flex，也可以通过浮动实现：

.content-wrap {
  overflow: hidden; /* 清除浮动带来的容器高度塌陷问题 */
  max-width: 1200px;
  margin: 0 auto;
}

.image-block {
  float: right;
  margin-left: 24px;
  width: 320px;
}

.image-block img {
  width: 100%;
  height: auto;
}

内容的提问来源于stack exchange，提问作者bagwell2323412