HTML实现多行文本居左、图片居右相邻排列的布局问题

问题原因 #

flex容器默认会将所有直接子元素横向排列，如果将每一行文本作为独立元素直接放入flex容器，所有文本行就会横向并排，无法纵向堆叠。

解决步骤 #

1. 给所有文本内容套一个独立的父容器（可以用<div>标签），相当于把所有文本打包成一个整体
2. flex容器内只放两个直接子元素：打包好的文本父容器、图片元素
3. 按需调整对齐、间距等样式即可

完整代码示例 #

HTML结构

<!-- 最外层flex容器 -->
<div class="content-wrapper">
  <!-- 所有文本的打包容器 -->
  <div class="text-area">
    <p>第一行文本，可插入<a href="#">链接内容</a></p>
    <p>第二行文本，行数可自由增减</p>
    <p>第三行文本，默认纵向排列</p>
  </div>
  <!-- 右侧图片 -->
  <img src="替换成你的图片路径" alt="图片说明文字">
</div>

CSS样式（每一行都标注了作用）

.content-wrapper {
  display: flex; /* 开启flex布局 */
  justify-content: space-between; /* 文本贴左，图片贴右，中间留空隙；如果要图片紧挨着文本，把这行值改成flex-start */
  align-items: center; /* 文本和图片垂直方向居中对齐 */
  max-width: 1200px; /* 限制容器最大宽度，避免页面太宽时内容过散 */
  margin: 0 auto; /* 实现整个容器在页面水平居中 */
  padding: 0 20px; /* 左右留20px空隙，避免小屏幕下内容贴边 */
  flex-wrap: wrap; /* 小屏幕宽度不够时，图片自动掉到文本下方，不会挤变形 */
  gap: 30px; /* 文本和图片之间的最小间距 */
}

.text-area {
  max-width: 70%; /* 限制文本区域宽度，避免每行文字过长难阅读 */
}

img {
  max-width: 25%; /* 限制图片最大宽度，避免过大溢出 */
  height: auto; /* 保持图片宽高比不变形 */
}

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