html - 调整浏览器大小时堆叠Divs

我对html / css相当陌生，并且遇到一个问题，当我缩小浏览器时，我的div重叠，并且随着我的扩展，两个div之间的距离变得更大。我想知道每个之间如何保持约20px的固定边距。这些都在父div内

小提琴https://jsfiddle.net/cro7mjsh/2/

<div class="main-outer">
<div class="about-inner">
<h3>「 About 」</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
  dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>
</div>

<div class="clients-inner">
<h3>「 Clients 」</h3>
<div class="flex-container">
  <div class="flex-item">
    <img src="./Assets/Clients/logo.jpg" alt="1" class="img-responsive" />
  </div>
  <div class="flex-item">
    <img src="./Assets/Clients/logo.jpg" alt="2" class="img-responsive" />
  </div>
  <div class="flex-item">
    <img src="./Assets/Clients/logo.jpg" alt="3" class="img-responsive" />
  </div>
  <div class="flex-item">
    <img src="./Assets/Clients/logo.jpg" alt="4" class="img-responsive" />
  </div>
  <div class="flex-item">
    <img src="./Assets/Clients/logo.jpg" alt="5" class="img-responsive" />
  </div>
</div>

最佳答案

我认为您无需进行这项工作即可。

从“ main-outer”中删除flex。

从内部大约和客户内部删除绝对值。同时为每个添加“ margin：20px auto 0px auto”，以达到您想要的效果。

查看我在CodePen上推荐的解决方案。

祝你好运！

.main-outer {
  justify-content: center;
  align-content: center;
  background-color: #eeeeee;
  height: 800px;
  position: relative;
}

.about-inner {
  border:1px blue solid !important;
  margin: 20px auto 0px auto;
  width: 80vw;
  background-color: white;
  display: block;
  justify-content: center;
  align-items: center;
  text-align: center;
  clear:both;
}

.clients-inner {
  border:1px blue solid !important;
  margin: 20px auto 0px auto;
  width: 80vw;
  background-color: white;
  display: block;
  justify-content: center;
  align-items: center;
  text-align: center;
  clear:both;
}

关于html - 调整浏览器大小时堆叠Divs，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54448841/