如何用Float或Flexbox实现图文环绕时的文本与列表对齐

尝试用两种方式实现图文环绕布局时遇到以下问题：

• Float方案：列表项目符号位置异常，「Head」文本与列表无法左对齐，仅项目符号紧贴图片（需保留Float布局并修正对齐）
• Flex方案：现有代码未达到理想的图文环绕效果

疑问：

• 如何调整图片右侧文本与列表，使其与图片保持合适间距？
• 如何用Flexbox实现文本与列表环绕图片的正确布局？

一、修正Float布局的对齐问题 #

原Float方案的问题出在给图片设置了margin-left: -52px，直接破坏了文本区域的正常缩进，导致列表项目符号错位。正确调整方式如下：

修正后代码 #

CSS

figure {
  float: left;
  margin-right: 20px; /* 直接控制图片与文本的间距 */
}
img {
  width: 170px;
  height: 170px;
}
/* 恢复列表默认缩进，避免被浮动元素干扰 */
ul {
  margin-left: 1.5em;
}

HTML

<h2>Float文本环绕图片（含文本/列表）</h2>
<p>如何用float或flexbox等现代方法正确实现</p>

<p>示例如下：</p>
<figure>
  <img src="https://randomuser.me/api/portraits/women/51.jpg" alt="示例图片">
  <figcaption>图片说明</figcaption>
</figure>

<p>Head:</p>
<ul>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum inte</li>
  <li>rdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</li>
</ul>

<p>预期的文本/列表对齐效果（图片右侧）：</p>
<p>Topic:</p>
<ul>
  <li>正确的项目符号/列表对齐</li>
</ul>

调整后，「Head」文本和列表会保持统一左对齐，图片与文本的间距通过figure的margin-right灵活控制，列表也能维持正常的缩进和项目符号位置。

二、用Flexbox实现正确的图文环绕布局 #

Flexbox是一维布局，要实现类似float的文本环绕效果，需将图片和文本区域拆分为两个横向排列的flex项，文本区域内部保持正常流布局即可。

正确实现代码 #

CSS

/* 外层容器用flex横向排列图片与文本 */
.persOpties {
  display: flex;
  gap: 20px; /* 控制图片与文本的间距，比margin更直观 */
  max-width: 1200px; /* 可选：限制容器宽度，避免布局过宽 */
  margin: 0 auto;
}
/* 固定图片容器宽度，防止被压缩 */
figure {
  flex-shrink: 0;
}
img {
  width: 170px;
  height: 170px;
}
figcaption {
  margin-top: 8px;
  text-align: center;
}
/* 让文本区域自动填充剩余空间 */
.text-content {
  flex-grow: 1;
}
/* 保持列表默认缩进 */
ul {
  margin-left: 1.5em;
}

HTML

<div class="persOpties">
  <figure>
    <img src="https://randomuser.me/api/portraits/women/51.jpg" alt="示例图片">
    <figcaption>图片说明</figcaption>
  </figure>
  <div class="text-content">
    <h2>Flex文本环绕图片（含文本/列表）</h2>
    <p>如何用float或flexbox等现代方法正确实现</p>

    <p>示例如下：</p>

    <p>Head:</p>
    <ul>
      <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum inte</li>
      <li>rdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</li>
    </ul>
  </div>
</div>

核心逻辑：

1. 外层用flex横向排列图片和文本区域
2. 给文本区域加flex-grow: 1，让它自动填充剩余空间
3. 用gap或margin控制图片与文本的间距
4. 文本区域内部的列表和文本保持正常流布局，自然实现类似环绕的排列效果

疑问解答 #

1. 调整图片与文本的间距：
   • Float方案：给浮动的figure或img设置margin-right即可
   • Flex方案：给外层flex容器设置gap，或给figure设置margin-right
2. Flexbox实现正确布局：
   将图片和文本区域拆分为两个横向排列的flex项，文本区域内部保持正常排版，利用flex-grow让文本区域填充剩余空间，既能实现图文环绕效果，又能保证列表和文本的对齐正常。

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