在重叠的 div 周围环绕文本答案

【问题标题】：Wrap text around overlapping divs在重叠的 div 周围环绕文本
【发布时间】：2020-11-19 10:12:35
【问题描述】：

我的主 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>

enter image description here

【问题讨论】：

您是说您希望项目 1 和项目 2 位于海洋色容器内吗？
这样？ - ibb.co/LrX7PC2
没有丹尼尔。 2 个 div 将与主 div 重叠，但主 div 中的文本应该环绕 2 个 div。有可能吗？
比如说，主 div 里面有很多内容（文本），文本不应该被 2 个重叠的 div 隐藏
是“main div”、“portfolio”div 还是“container”div？

标签： javascript html css bootstrap-4 frontend

【解决方案1】：

您是否尝试过将子 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>

【讨论】：

试过了。没有帮助。只有 div 进入主 div。但是主 div 中的文本不会被环绕

【解决方案2】：

我不确定您真正想要实现什么 - 我的猜测是您希望容器的子项并排浮动。如果我的猜测是正确的，那么以下内容可能会有所帮助 - 您可以添加自己的样式

#portfolio>.container{
   display:flex;
   flex-wrap:wrap;
   justify-content:space-between;
 }
 #portfolio>.container>*{
   width:30%;
 }



<section id="portfolio">
  <div class="container" style="padding-top: 100px;  height: 100vh; position: relative;">
    <div class="portfolio" style="background: #2186B0;">
      <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>

附带说明，尽量避免使用内联样式

【讨论】：

是的，最初我使用内联样式进行细微更改，逐渐将所有内容移动到 css 文件中。
试过了，。没有帮助。
我在 stackoverflow 中发现一些 cmets 说，当 div 重叠时，文本换行是不可能的。因此，我将文本和 div 彼此分开，这样 2 个 div 就不会与主 div 中的文本重叠。