Question

我正在尝试找到以下解决方案：

＆＃13;

<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>

＆＃13;

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

＆＃13;

这将产生如下内容： Image 1 - Problematic view

我希望在没有（如果可能）<br><p style="text-indent:6em;">

的情况下实现以下目标

Image 2 - Target view

到目前为止，我无法弄清楚这一点，

感谢您的帮助！

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>

在绝对位置div周围包装文本（内部相对位置div）

1 个答案: