Question

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

<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

我认为您不需要弹性就可以完成这项工作。

从“ main-outer”中删除flex。

从绝对内部和绝对内部移除绝对。同时为每一项添加“边距：20px自动0px自动”，以达到您想要的效果。

在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;
}

调整浏览器大小时堆叠Divs

1 个答案: