将文本环绕在重叠的div周围

Question

我有一个包含一些文本的主div，以及另外两个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

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

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

顺便说一句，尽可能避免使用内联样式