如何实现单列图片在双列文本中的环绕排版？

你需要的目标排版效果：

针对你提到的column-count和flex布局无法满足需求的问题，下面提供两种可行的解决方案：

方案一：浮动+列布局结合（无需拆分文本容器） #

核心思路是将图片嵌入双列文本容器内，通过浮动让文本自然环绕，同时利用列布局处理剩余文字的排版。

修改后的HTML #

<div class="wrap-text">
  <img class="media-one-image-wrap" />
  <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

  <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>

  <p>Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue. Sed posuere consectetur est at lobortis.</p>

  <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas sed diam eget risus varius blandit sit amet non magna. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eget metus.</p>
</div>

配套CSS #

.wrap-text {
  column-count: 2;
  column-gap: 20px; /* 控制两列文本的间距 */
}

img.media-one-image-wrap {
  width: calc(50% + 10px); /* 单列宽度+半列间距，匹配列布局尺寸 */
  height: 200px;
  background-color: red;
  float: right;
  margin-left: 20px; /* 给文本留出环绕空间 */
  margin-bottom: 10px;
}

这种方式既保留了双列文本的排版，又让图片自然嵌入文本流实现环绕效果，不会出现图片被挤到侧边的问题。

方案二：CSS Grid布局（精准控制区域） #

如果需要更灵活的排版控制，可使用Grid来划分区域，适合对布局结构有明确规划的场景：

HTML结构 #

<div class="grid-container">
  <img class="media-one-image-wrap" />
  <div class="wrap-text">
    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>

    <p>Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue. Sed posuere consectetur est at lobortis.</p>

    <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas sed diam eget risus varius blandit sit amet non magna. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eget metus.</p>
  </div>
</div>

配套CSS #

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
}

img.media-one-image-wrap {
  grid-column: 2 / 3; /* 图片固定在第二列 */
  grid-row: 1 / span 2; /* 跨两行匹配文本高度 */
  height: 200px;
  background-color: red;
  width: 100%;
}

.wrap-text {
  grid-column: 1 / 3; /* 文本占满两列 */
  column-count: 2;
  column-gap: 20px;
}

可以根据实际设计需求调整column-gap、margin等参数，适配不同的尺寸和间距要求。

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