如何实现文本始终位于图片右侧（不换行），并支持多组图文依次排列？

绝对有办法搞定这个问题！Float布局的文本绕流确实是个常见痛点，我们可以用更现代、更可控的CSS布局方案，实现文本始终固定在图片右侧，不会跑到图片下方的效果，同时让多组图文依次垂直排列。下面给你几个实用的方案：

方案1：Flexbox布局（推荐，简洁灵活） #

Flexbox是目前最常用的布局方式之一，代码简洁，兼容性好（支持IE10+及所有现代浏览器），能轻松实现需求。

核心思路是给每个图文组套一个Flex容器，让图片和文本作为子元素在一行排列，同时让文本区域自动填充剩余空间：

<style>
  /* 图文组容器 */
  .image-text-pair {
    display: flex;
    gap: 1.5rem; /* 图片和文本之间的间距，可按需调整 */
    align-items: flex-start; /* 顶部对齐，换成center可垂直居中 */
    margin-bottom: 2rem; /* 组与组之间的垂直间距 */
  }

  /* 图片样式 */
  .image-text-pair img {
    width: 200px; /* 固定图片宽度，也可用百分比响应式 */
    height: auto; /* 保持图片比例 */
  }

  /* 文本区域 */
  .image-text-pair .text-block {
    flex: 1; /* 让文本区域占据容器剩余所有空间 */
  }
</style>

<!-- 第一组图文 -->
<div class="image-text-pair">
  <img src="your-image-1.jpg" alt="示例图片1">
  <div class="text-block">
    这里是任意长度的文本——不管只有几个字，还是长篇大论，都会牢牢固定在图片右侧，完全不会绕到图片下方。
  </div>
</div>

<!-- 第二组图文 -->
<div class="image-text-pair">
  <img src="your-image-2.jpg" alt="示例图片2">
  <div class="text-block">
    这是第二组的文本内容，两组会自动垂直排列，每组内部的图文始终保持并排。
  </div>
</div>

方案2：Grid布局（规整可控） #

如果你需要更精确的布局控制（比如固定列宽比例），Grid布局是个不错的选择，它能明确划分图片和文本的区域，彻底避免文本绕流：

<style>
  .image-text-pair {
    display: grid;
    /* 第一列200px给图片，第二列用1fr占据剩余所有空间 */
    grid-template-columns: 200px 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
    align-items: flex-start;
  }

  .image-text-pair img {
    width: 100%; /* 图片占满所在Grid列的宽度 */
    height: auto;
  }
</style>

<div class="image-text-pair">
  <img src="grid-image.jpg" alt="Grid布局示例图">
  <div>
    Grid布局下，文本被限制在自己的列里，哪怕文本很短，也不会跑到图片下方，布局非常规整。
  </div>
</div>

方案3：兼容老浏览器（inline-block，仅作备选） #

如果需要兼容IE8及以下这类非常老旧的浏览器，可以用inline-block方案，但需要处理一些细节（比如元素间隙和宽度计算）：

<style>
  .image-text-pair {
    margin-bottom: 2rem;
    font-size: 0; /* 消除inline-block元素之间的空白间隙 */
  }

  .image-text-pair img,
  .image-text-pair .text-block {
    display: inline-block;
    vertical-align: top; /* 顶部对齐 */
    font-size: 16px; /* 恢复文本的字体大小 */
  }

  .image-text-pair img {
    width: 200px;
    margin-right: 1.5rem;
  }

  .image-text-pair .text-block {
    /* 总宽度减去图片宽度和间距，确保文本不会换行 */
    width: calc(100% - 200px - 1.5rem);
  }
</style>

<div class="image-text-pair">
  <img src="old-browser-image.jpg" alt="兼容老浏览器示例图">
  <div class="text-block">
    这个方案仅用于极端老浏览器兼容，日常开发优先选Flex或Grid。
  </div>
</div>

总结 #

• 优先选Flexbox：代码最少，最灵活，能快速适配各种场景；
• 追求布局精确性选Grid：适合需要固定列宽比例的场景；
• inline-block仅作为老浏览器兼容的备选方案。

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