彼此重叠的块级元素

时间：2018-10-22 22:27:28

标签： html css display

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

我已经为每个部分提供了一个“块”描述，据我所知，应该将它们放在另一个块的下面，使我相信我错了而不是漏掉了一些东西。希望您能帮助我识别它。谢谢

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

1 个答案:

答案 0 :(得分：0)

您对.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>

相关问题
最新问题