css - 如何在绝对位置 div 周围包装文本(在相对位置 div 内)？

Question

我正在尝试找到以下问题的解决方案:

<style>#about {
  width: 100px;
  margin: 10px;
  padding: 5px;
  text-align: center;
  background: #D7D8A2;
  border: 0.1em dotted #7A7A7A;
  position: absolute;
  left: -9px;
  top: 105px;
  z-index: 15;
}

#about-ct {
  width: 95%;
  height: 80px;
  margin: 10px;
  background: #FFFFFF;
  border: 0.1em dotted #7A7A7A;
  position: relative;
  top: -35px;
  z-index: 12;
}

</style>

<section id="section">

  <div id="about">About</div>

  <div id="about-ct">Lorem ipsum...</p></div>
</section>

这会产生这样的东西:

我想在没有(如果可能的话)<br><p style="text-indent:6em;"> 的情况下实现以下目标

到目前为止我还没有弄清楚，

感谢您的帮助!

Answer 1

<style>
  #about {
  width: 100px;
  margin: 10px;
  padding: 5px;
  text-align: center;
  background: #D7D8A2;
  border: 0.1em dotted #7A7A7A;
  position: absolute;
  top: 13px;
  z-index: 100;
  background-color: #db4344;
  color: #fff;
  z-index: 15;
}
#about{
  position: absolute;
  top: 13px;
  z-index: 100;
  background-color: #db4344;
  color: #fff;
  z-index: 15;
}
#about-ct {
  width: 95%;
  height: auto;
  margin: 10px;
  background: #FFFFFF;
  border: 0.1em dotted #7A7A7A;

  top: -35px;
  z-index: 12;
  text-indent: 55px;
}

</style>

<section id="section">

  <div id="about">About</div>

  <div id="about-ct">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porttitor vitae ligula interdum auctor. Donec commodo purus ultrices turpis aliquet, quis sodales nisi euismod. Nunc libero metus, lobortis quis mi sit amet, placerat volutpat enim. Cras libero arcu, aliquam quis rhoncus id, aliquet nec nunc. Pellentesque vel ligula in magna feugiat gravida. Morbi aliquam, diam et fermentum iaculis, mauris risus tristique elit, sit amet ullamcorper diam mi non odio. Nulla facilisi. Cras malesuada justo felis, vitae laoreet justo facilisis nec. Fusce sit amet facilisis ex, sed laoreet nibh. Nulla sit amet justo nisi. Cras eu dui blandit, aliquam velit eget, blandit lacus. Etiam non turpis ut tellus aliquet sodales eu sagittis urna. Nullam et pretium lorem..</p></div>
</section>