html - 折叠在另一个顶部的 Flex 盒

Question

我试图让一个文本框折叠图像，但它在图像前面折叠的那一刻。我也不能让图像在它们之间有空间折叠。我不知道我做错了什么。
我尝试了不同的东西并搜索了一段时间但没有答案，我只能找到关于边缘折叠的东西，而不是关于这个。

body{
  margin: 0;
  background-color: #120E0A;
  height: 1300px;
} 
 /*Check out*/
.checkouttext{
  display: flex;
  font-family: 'Abril Fatface', cursive;
  color: #d9bd66;
  font-size: 30px;
  height: 100px;
  width: 100%;
  align-items:center;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: row;
}
.checkoutimages{
  display: flex;
  width: 100%;
  height: 670px;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
}
/*About*/
.about{
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  max-width: 1200px;
  max-height: 200px;
}
.abouttitle{
  font-family: 'Abril Fatface', cursive;
  color: #d9bd66;
  margin-left: 20px;
  font-size: 25px;
}
.abouttext{
  width: 1300px;
  color: white;
  margin-left: 15px;
  font-size: 18px;
}

<div class="checkouttext">
 Check out the new Halo merch!
</div>
<div class="checkoutimages">
 <img src="https://via.placeholder.com/300x500" alt="">
 <img src="https://via.placeholder.com/300x500" alt="">
 <img src="https://via.placeholder.com/300x500" alt="">
</div>

<!--About us-->
<div class="about">
 <div class="abouttitle">
   About us
 </div>
 <div class="abouttext">
   <p>Is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
 </div>
</div>

Answer 1

您正在设置整个 checkoutimages 的高度div 到 height: 670px;这意味着这是分配给 div 的总高度......即使图像被包装到另一行。此 div 后面的元素将根据该高度定位，因此如果内容大于 670px下一个元素将被放置在它们之上。
如果您希望该 div 中的图像的最大高度为 670 像素，您可以这样做:

.checkoutimages img { max-height: 670px; }

或者，如果您想在 checkoutimages 前后添加空格div，您可以添加边距或填充:

.checkoutimages { margin-top: 65px; margin-bottom: 65px; }

工作示例:

body {
  margin: 0;
  background-color: #120E0A;
  height: 1300px;
}


/*Check out*/

.checkouttext {
  display: flex;
  font-family: 'Abril Fatface', cursive;
  color: #d9bd66;
  font-size: 30px;
  height: 100px;
  width: 100%;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: row;
}

.checkoutimages {
  display: flex;
  width: 100%;
  margin-top: 65px;
  margin-bottom: 65px;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
}

.checkoutimages img {
  max-height: 670px;
  margin-bottom: 10px;
}


/*About*/

.about {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  max-width: 1200px;
  max-height: 200px;
}

.abouttitle {
  font-family: 'Abril Fatface', cursive;
  color: #d9bd66;
  margin-left: 20px;
  font-size: 25px;
}

.abouttext {
  width: 1300px;
  color: white;
  margin-left: 15px;
  font-size: 18px;
}

<div class="checkouttext">
  Check out the new Halo merch!
</div>
<div class="checkoutimages">
  <img src="https://via.placeholder.com/300x500" alt="">
  <img src="https://via.placeholder.com/300x500" alt="">
  <img src="https://via.placeholder.com/300x500" alt="">
</div>

<!--About us-->
<div class="about">
  <div class="abouttitle">
    About us
  </div>
  <div class="abouttext">
    <p>Is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived
      not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
      software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content
      here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
      Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
  </div>
</div>