时间戳

首页 > 解决方案 > 在重叠的 div 周围环绕文本

javascript - 在重叠的 div 周围环绕文本

问题描述

我的主 div 包含一些文本，还有 2 个其他 div，它们与主 div 重叠。但主 div 中的文本与其他 2 个 div 重叠。我希望主 div 中的文本环绕重叠的 div。

这个问题或代码可能很愚蠢，但请帮帮我。

.project1,
.project2 {
  position: absolute;
  background-color: #88c1dc;
  width: 40%;
  height: 50px;
  z-index: 11;
  border-radius: 10px;
}

.project1 {
  top: 460px;
}

.project2 {
  top: 540px;
}

.project_title_heading {
  padding-top: 8px;
  padding-left: 20px;
}
<section id="portfolio">
  <div class="container" style="padding-top: 100px;  height: 100vh; position: relative;">
    <div class="portfolio" style="background: #2186B0; position: absolute; z-index: 10; left: 29%; padding: 30px; height: 80vh; border-radius: 20px;">
      <p style="text-align: justify; font-weight: 500; font-size: 18px;">Lorem ipsum text here...</p>
    </div>
    <div class="project1">
      <h3 class="project_title_heading"><a href="">Project 1</a>
      </h3>
    </div>
    <div class="project2">
      <h3 class="project_title_heading"><a href="">Project 2</a></h3>
    </div>
  </div>

</section>

在此处输入图像描述

标签： javascripthtmlcssbootstrap-4frontend

解决方案

您是否尝试过将子 div 嵌入到主 div 中？试试下面：

<section id="portfolio">
  <div class="container" style="padding-top: 100px;  height: 100vh; position: relative;">
    <div class="portfolio" style="background: #2186B0; position: absolute; z-index: 10; left: 29%; padding: 30px; height: 80vh; border-radius: 20px;">
      <p style="text-align: justify; font-weight: 500; font-size: 18px;">Lorem ipsum text here...</p>
      
      <!--New placement-->
      <div class="project1">
          <h3 class="project_title_heading"><a href="">Project 1</a></h3>
      </div>
      <div class="project2">
          <h3 class="project_title_heading"><a href="">Project 2</a></h3>
      </div>
      <!--New placement-->

    </div>
  </div>

推荐阅读