在重疊的 div 周圍環繞文本

Question

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

在此處輸入圖像描述

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

Answer 2

我不確定您真正想要實現什么 - 我的猜測是您希望容器的子項並排浮動。 如果我的猜測是正確的，那么以下內容可能會有所幫助 - 您可以添加自己的 styles

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

作為旁注，盡可能避免使用內聯樣式