块级元素相互重叠

Question

在一些帮助下，我将 "about_us" 部分放在了下面的代码中，它的功能完全符合我的要求（忽略不正常的文本，在整个项目中工作正常）。我遇到的问题是，我尝试放置在 "about_us" 部分下方的任何对象仅将其自身置于第一行下方，而不是整个块下方。

我给每个部分都做了一个 "block" 描述，据我所知，应该把它们一个接一个地放在另一个下面，让我相信我做错了什么而不是遗漏了什么。希望你能帮我鉴定一下。谢谢

.about_us {
 max-width: 1600px;
 min-width: 800px;
 height: 370px;
 margin: 0 auto;
 display: block;
}
.about_us_container {
 display: block;
 width: 100%;
 height: 370px;
}
.about_us_image_clip, .about_us_background {
 display: table-cell;
 width: 50%;
 height: 370px;
 max-height: 370px;
 overflow: hidden;
}
.about_us_img1 {
 background-repeat: no-repeat;
 background-position: center !important;
 background: url(https://picsum.photos/2000/2000);
 background-size: cover;
}
.about_us_img2 {
 background-repeat: no-repeat;
 background-position: center !important;
 background: url(https://picsum.photos/2000/2000);
 background-size: cover;
}
.about_us_img3 {
 background-repeat: no-repeat;
 background-position: center !important;
 background: url(https://picsum.photos/2000/2000);
 background-size: cover;
}
.about_us_heading {
 font-size: 50px;
 font-family: "alexa-std";
 font-style: normal;
 font-weight: 400;
 margin: 4% 4% 0%;
 color: floralwhite;
}
.about_us_description {
 font-size: 20px;
 font-family: alice;
 font-style: normal;
 font-weight: 400;
 margin: 2% 6%;
 text-indent: 40px;
 color: floralwhite;
}
.centre {
 display: block;
 max-width: 1600px;
 margin: auto;
}
.centre img {
 max-width: 1000px;
 width: 100%;
 height: auto;
}

<section class="about_us">
 <div class="about_us_container">
  <div class="about_us_image_clip about_us_img1"></div>
  <div class="about_us_background" style="background-color: #63925C"><p class="about_us_heading">Heading One</p><p class="about_us_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus, dolor in ultricies accumsan, sapien ligula faucibus orci, sed ullamcorper massa libero hendrerit elit. Proin egestas ac augue vitae dapibus. Phasellus quis magna arcu. Curabitur suscipit nulla sit amet leo rutrum, ac bibendum eros gravida. Nunc consectetur elit et est pretium fringilla. Maecenas sed imperdiet orci. Duis bibendum a erat nec dignissim. Aliquam eu libero sit amet nisi ultrices eleifend. Quisque auctor lectus non mi blandit sagittis. Nam gravida mauris augue, sed elementum nulla laoreet facilisis. Ut eleifend bibendum neque et mattis. Vivamus consequat iaculis malesuada. Integer sed aliquet mi.</p></div>
 </div>
 <div class="about_us_container">
  <div class="about_us_background" style="background-color: #6A8374"><p class="about_us_heading">Heading Two</p><p class="about_us_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus, dolor in ultricies accumsan, sapien ligula faucibus orci, sed ullamcorper massa libero hendrerit elit. Proin egestas ac augue vitae dapibus. Phasellus quis magna arcu. Curabitur suscipit nulla sit amet leo rutrum, ac bibendum eros gravida. Nunc consectetur elit et est pretium fringilla. Maecenas sed imperdiet orci. Duis bibendum a erat nec dignissim. Aliquam eu libero sit amet nisi ultrices eleifend. Quisque auctor lectus non mi blandit sagittis. Nam gravida mauris augue, sed elementum nulla laoreet facilisis. Ut eleifend bibendum neque et mattis. Vivamus consequat iaculis malesuada. Integer sed aliquet mi.</p></div>
  <div class="about_us_image_clip about_us_img2"></div>
 </div>
 <div class="about_us_container">
  <div class="about_us_image_clip about_us_img3"></div>
  <div class="about_us_background" style="background-color: #63925C"><p class="about_us_heading">Heading Three</p><p class="about_us_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus, dolor in ultricies accumsan, sapien ligula faucibus orci, sed ullamcorper massa libero hendrerit elit. Proin egestas ac augue vitae dapibus. Phasellus quis magna arcu. Curabitur suscipit nulla sit amet leo rutrum, ac bibendum eros gravida. Nunc consectetur elit et est pretium fringilla. Maecenas sed imperdiet orci. Duis bibendum a erat nec dignissim. Aliquam eu libero sit amet nisi ultrices eleifend. Quisque auctor lectus non mi blandit sagittis. Nam gravida mauris augue, sed elementum nulla laoreet facilisis. Ut eleifend bibendum neque et mattis. Vivamus consequat iaculis malesuada. Integer sed aliquet mi.</p></div>
 </div>
</section>
<section class="centre">
    <img src="https://picsum.photos/1000/500" width="1000" height="500" alt=""/> 
</section>

Answer 1

您对类 .about_us 和 about_us_container 的高度设置迫使图像重叠。我刚刚删除了这些，结果应该更接近您的想法。

.about_us {
  max-width: 1600px;
  min-width: 800px;
  margin: 0 auto;
  display: block;
}

.about_us_container {
  display: block;
  width: 100%;
}

.about_us_image_clip,
.about_us_background {
  display: table-cell;
  width: 50%;
  height: 370px;
  max-height: 370px;
  overflow: hidden;
}

.about_us_img1 {
  background-repeat: no-repeat;
  background-position: center !important;
  background: url(https://picsum.photos/2000/2000);
  background-size: cover;
}

.about_us_img2 {
  background-repeat: no-repeat;
  background-position: center !important;
  background: url(https://picsum.photos/2000/2000);
  background-size: cover;
}

.about_us_img3 {
  background-repeat: no-repeat;
  background-position: center !important;
  background: url(https://picsum.photos/2000/2000);
  background-size: cover;
}

.about_us_heading {
  font-size: 50px;
  font-family: "alexa-std";
  font-style: normal;
  font-weight: 400;
  margin: 4% 4% 0%;
  color: floralwhite;
}

.about_us_description {
  font-size: 20px;
  font-family: alice;
  font-style: normal;
  font-weight: 400;
  margin: 2% 6%;
  text-indent: 40px;
  color: floralwhite;
}

.centre {
  display: block;
  max-width: 1600px;
  margin: auto;
}

.centre img {
  max-width: 1000px;
  width: 100%;
  height: auto;
}

<section class="about_us">
  <div class="about_us_container">
    <div class="about_us_image_clip about_us_img1"></div>
    <div class="about_us_background" style="background-color: #63925C">
      <p class="about_us_heading">Heading One</p>
      <p class="about_us_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus, dolor in ultricies accumsan, sapien ligula faucibus orci, sed ullamcorper massa libero hendrerit elit. Proin egestas ac augue vitae dapibus. Phasellus quis magna arcu. Curabitur
        suscipit nulla sit amet leo rutrum, ac bibendum eros gravida. Nunc consectetur elit et est pretium fringilla. Maecenas sed imperdiet orci. Duis bibendum a erat nec dignissim. Aliquam eu libero sit amet nisi ultrices eleifend. Quisque auctor lectus
        non mi blandit sagittis. Nam gravida mauris augue, sed elementum nulla laoreet facilisis. Ut eleifend bibendum neque et mattis. Vivamus consequat iaculis malesuada. Integer sed aliquet mi.</p>
    </div>
  </div>
  <div class="about_us_container">
    <div class="about_us_background" style="background-color: #6A8374">
      <p class="about_us_heading">Heading Two</p>
      <p class="about_us_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus, dolor in ultricies accumsan, sapien ligula faucibus orci, sed ullamcorper massa libero hendrerit elit. Proin egestas ac augue vitae dapibus. Phasellus quis magna arcu. Curabitur
        suscipit nulla sit amet leo rutrum, ac bibendum eros gravida. Nunc consectetur elit et est pretium fringilla. Maecenas sed imperdiet orci. Duis bibendum a erat nec dignissim. Aliquam eu libero sit amet nisi ultrices eleifend. Quisque auctor lectus
        non mi blandit sagittis. Nam gravida mauris augue, sed elementum nulla laoreet facilisis. Ut eleifend bibendum neque et mattis. Vivamus consequat iaculis malesuada. Integer sed aliquet mi.</p>
    </div>
    <div class="about_us_image_clip about_us_img2"></div>
  </div>
  <div class="about_us_container">
    <div class="about_us_image_clip about_us_img3"></div>
    <div class="about_us_background" style="background-color: #63925C">
      <p class="about_us_heading">Heading Three</p>
      <p class="about_us_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus, dolor in ultricies accumsan, sapien ligula faucibus orci, sed ullamcorper massa libero hendrerit elit. Proin egestas ac augue vitae dapibus. Phasellus quis magna arcu. Curabitur
        suscipit nulla sit amet leo rutrum, ac bibendum eros gravida. Nunc consectetur elit et est pretium fringilla. Maecenas sed imperdiet orci. Duis bibendum a erat nec dignissim. Aliquam eu libero sit amet nisi ultrices eleifend. Quisque auctor lectus
        non mi blandit sagittis. Nam gravida mauris augue, sed elementum nulla laoreet facilisis. Ut eleifend bibendum neque et mattis. Vivamus consequat iaculis malesuada. Integer sed aliquet mi.</p>
    </div>
  </div>
</section>
<section class="centre">
  <img src="https://picsum.photos/1000/500" width="1000" height="500" alt="" />
</section>

块级元素相互重叠

Block level elements overlaying eachother

html

css

display