如何实现单文本容器内容在图片旁自动流式换行？

我目前用CSS Grid实现了一个图文布局：第一行包含图片和文本，第二行仅为文本，代码如下：

原Grid实现代码 #

CSS #

.container {  
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas:
    "Image Image Text-1"
    "Image Image Text-1"
    "Text-2 Text-2 Text-2";
}

.Image { grid-area: Image; }
.Text-1 { grid-area: Text-1; }
.Text-2 { grid-area: Text-2; }

div{
  outline : 1px solid black
}

HTML #

<div class="container">
  <div class="Image">Grid elements comes here</div>
  <div class="Text-1">Top Text Top Text Top Text Top Text Top Text Top Text Top Text
  Top Text Top Text Top Text Top Text Top Text Top Text Top Text  Top Text Top Text Top Text Top Text Top Text Top Text Top Text  Top Text Top Text Top Text Top Text Top Text Top Text Top Text  Top Text Top Text Top Text Top Text Top Text Top Text Top Text  Top Text Top Text Top Text Top Text Top Text Top Text Top Text  Top Text Top Text Top Text Top Text Top Text Top Text Top Text  Top Text Top Text Top Text Top Text Top Text Top Text Top Text  Top Text Top Text Top Text Top Text Top Text Top Text Top Text  Top Text Top Text Top Text Top Text Top Text Top Text Top Text  Top Text Top Text Top Text Top Text Top Text Top Text Top Text  Top Text Top Text Top Text Top Text Top Text Top Text Top Text  Top Text Top Text Top Text Top Text Top Text Top Text Top Text  Top Text Top Text Top Text Top Text Top Text Top Text Top Text
  Top Text Top Text Top Text Top Text Top Text Top Text Top Text</div>
  <div class="Text-2">Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text  </div>
</div>

现在需要实现：只用单个文本容器，让文本从图片右侧开始排布，空间不足时自动流到图片下方。以下是几种可行方案：

方案1：CSS Float（经典原生实现） #

这是最直接的方案，完全符合需求，兼容性拉满，代码极简。

代码示例 #

CSS

.container {
  max-width: 1200px;
  margin: 0 auto;
}

.Image {
  /* 对应原Grid的两列宽度 */
  width: 66.666%;
  float: left;
  margin-right: 1rem;
  margin-bottom: 1rem;
  /* 模拟图片高度，实际替换为<img>即可 */
  height: 200px;
  background-color: #eee;
}

.Text {
  /* 无需额外设置，文本自动环绕浮动元素 */
}

/* 清除浮动，避免容器高度坍塌 */
.container::after {
  content: "";
  display: table;
  clear: both;
}

HTML

<div class="container">
  <div class="Image">图片内容</div>
  <div class="Text">这里是完整的文本内容，会先在图片右侧排列，当右侧空间不足时自动流到图片下方，铺满整个容器宽度。这里是完整的文本内容，会先在图片右侧排列，当右侧空间不足时自动流到图片下方，铺满整个容器宽度。这里是完整的文本内容，会先在图片右侧排列，当右侧空间不足时自动流到图片下方，铺满整个容器宽度。这里是完整的文本内容，会先在图片右侧排列，当右侧空间不足时自动流到图片下方，铺满整个容器宽度。</div>
</div>

方案2：CSS Grid（单个文本容器版本） #

如果偏好Grid布局，也可以调整写法，无需拆分文本：

代码示例 #

CSS

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.Image {
  /* 图片占据前两列、前两行 */
  grid-column: 1 / 3;
  grid-row: 1 / 3;
  height: 200px;
  background-color: #eee;
}

.Text {
  /* 文本从第三列第一行开始，延伸至最后一行 */
  grid-column: 3 / 4;
  grid-row: 1 / -1;
}

HTML

<div class="container">
  <div class="Image">图片内容</div>
  <div class="Text">这里是完整的文本内容，先在图片右侧第三列排列，内容超过图片高度后自动流到图片下方的全列空间。这里是完整的文本内容，先在图片右侧第三列排列，内容超过图片高度后自动流到图片下方的全列空间。这里是完整的文本内容，先在图片右侧第三列排列，内容超过图片高度后自动流到图片下方的全列空间。</div>
</div>

方案3：CSS Shape Outside（灵活环绕） #

如果需要不规则图片的文本环绕效果，可用shape-outside，矩形场景下和Float效果一致：

代码示例 #

CSS

.Image {
  width: 66.666%;
  float: left;
  shape-outside: inset(0 0 0 0); /* 匹配矩形图片边界 */
  margin-right: 1rem;
  height: 200px;
  background-color: #eee;
}

方案对比 #

• Float：兼容性最好（支持所有浏览器），代码最简单，适合常规矩形图片布局。
• Grid方案：精确控制网格区域，适合需要严格列宽的场景，依赖图片高度确定文本流的触发时机。
• Shape Outside：适合不规则形状的图片环绕，仅现代浏览器支持。

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