重叠div下文本被遮挡，如何实现文本自适应环绕布局？

问题描述 #

当前布局中，.outer div通过margin-left: -150px与左侧的.inner div重叠，导致.outer内的文本被.inner遮挡。需要让.outer内的文本自动向自身右侧环绕排列，且不能通过固定宽度解决（文本长度动态变化），同时保持.outer的位置固定。

解决方案 #

方法1：预留左侧空白（简单直接） #

利用重叠宽度固定（150px）的特点，给.outer的内容容器添加左侧空白，让文本远离重叠区域：

1. 调整.outer的对齐方式，取消水平居中，改为左对齐：

.outer {
  /* 保留原有样式，修改justify-content */
  justify-content: flex-start;
}

2. 给.content添加左侧外边距，预留重叠区域的空白：

.content {
  margin-left: 150px;
}

方法2：使用shape-outside实现动态环绕 #

适合需要更灵活文本布局的场景，通过CSS属性让文本自动绕开重叠区域：
给.content添加以下样式：

.content {
  shape-outside: inset(0 0 0 150px);
  float: left;
  width: 100%;
}

shape-outside: inset(0 0 0 150px)会定义一个左侧向内缩进150px的区域，文本会自动绕开这个区域排列，无需调整.outer的对齐方式。

修改后的完整代码 #

CSS代码 #

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
html {
  font-family: "Montserrat";
}
section {
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #1e1f26;
}
.container {
  width: 90%;
  max-width: 1000px;
  margin: 50px auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.inner {
  width: 50%;
  height: 600px;
  background-color: #fafafa;
  border-radius: 8px;
}
.outer {
  width: 50%;
  min-height: 400px;
  background-color: #303137;
  display: flex;
  align-items: center;
  /* 修改为左对齐，适配方法1 */
  justify-content: flex-start;
  padding: 30px;
  border-radius: 8px;
  color: white;
  margin-left: -150px;
}
/* 方法1的样式 */
.content {
  margin-left: 150px;
}
/* 方法2的样式（替换上面的.content样式即可） */
/* .content {
  shape-outside: inset(0 0 0 150px);
  float: left;
  width: 100%;
} */
.right h1 {
  font-size: 40px;
  font-weight: lighter;
}
.right p {
  margin: 20px 0;
  font-weight: 500;
  line-height: 25px;
}
.right a {
  text-decoration: none;
  text-transform: uppercase;
  background-color: white;
  color: black;
  padding: 20px 30px;
  display: inline-block;
  letter-spacing: 2px;
}

HTML代码 #

<section>
  <div class="container">
    <div class="inner">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
    <div class="outer">
      <div class="content">
        <h1>This is a heading</h1>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
      </div>
    </div>
  </div>
</section>

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