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

Question

我是 html/css 的新手，我遇到了一个问题:当我缩小浏览器时，我的 div 会重叠，并且随着我展开，两个 div 之间的差距会变大。我想知道如何在每个之间有一个大约 20px 的固定边距。这些都在父 div 中

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

Answer 1

我认为您不需要 flex 来完成这项工作。

从“main-outer”中移除 flex。

从 about-inner 和 clients-inner 中删除绝对值。将“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;
}