如何在div中部实现文本环绕？shape-outside替代方案问询

shape-outside确实仅在配合float: left/right时生效，要实现中间段落居中、其余文本环绕（带边距）的效果，这里提供两种可行方案：

方案一：CSS Grid + 伪元素占位 #

利用Grid布局划分区域，通过伪元素占据左右空间，让中间段落居中，同时让普通段落填充剩余区域。

调整后HTML结构 #

<div class="sC-content-wrapper">
  <?php
  $text = $data->firstParagraph();
  $paragraphs = explode("\n\n", $text);
  $middleParagraph = $data->secondParagraph();
  ?>
  <div class="normal-paragraphs">
    <?php foreach ($paragraphs as $paragraph): ?>
      <p class="normal-paragraph"><?= $paragraph ?></p>
    <?php endforeach; ?>
  </div>

  <div class="middle-paragraph-container">
    <p class="middle-paragraph"><?= $middleParagraph ?></p>
  </div>
</div>

对应CSS样式 #

.sC-content-wrapper {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 2rem; /* 控制中间段落与两侧文本的边距 */
  position: relative;
}

.normal-paragraphs {
  grid-column: 1 / -1; /* 普通段落占据整列宽度 */
}

.middle-paragraph-container {
  grid-column: 2; /* 固定在中间列 */
  --middle-width: 300px;
  width: var(--middle-width);
  margin: 1rem auto;
  background: #f0f0f0;
  padding: 1rem;
  border-radius: 8px;
}

/* 用伪元素创建左右占位区域，触发文本环绕 */
.middle-paragraph-container::before,
.middle-paragraph-container::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(50% - (var(--middle-width) / 2) - 1rem);
  shape-outside: inset(0 0 0 0);
}

.middle-paragraph-container::before {
  left: 0;
  float: left;
}

.middle-paragraph-container::after {
  right: 0;
  float: right;
}

方案二：Flex布局 + 浮动占位 #

通过Flex让中间段落居中，配合浮动伪元素和精确宽度计算，实现文本环绕效果（无需调整原有HTML结构）。

对应CSS样式 #

.sC-content-wrapper {
  position: relative;
  padding: 0 1rem;
}

.middle-paragraph-container {
  width: 300px;
  margin: 1rem auto;
  background: #f0f0f0;
  padding: 1rem;
  border-radius: 8px;
}

/* 左右浮动伪元素，占据中间段落两侧的空间 */
.middle-paragraph-container::before {
  content: "";
  float: left;
  width: calc(50% - 150px - 1rem); /* 50%容器宽度 - 中间容器半宽 - 边距 */
  height: 100%;
  shape-outside: inset(0 0 0 0);
}

.middle-paragraph-container::after {
  content: "";
  float: right;
  width: calc(50% - 150px - 1rem);
  height: 100%;
  shape-outside: inset(0 0 0 0);
}

.normal-paragraph {
  text-align: justify; /* 可选：让文本对齐更规整 */
}

关键提示 #

• 两种方案核心都是用伪元素+float+shape-outside模拟左右占位，触发普通文本的环绕行为。
• 需根据中间段落的实际宽度调整CSS中的数值（比如示例中的300px、1rem），确保边距和环绕效果符合需求。
• 响应式场景下，可通过媒体查询动态修改中间容器宽度和占位计算值。

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