html - block 级元素相互重叠

标签 html css display

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

我已经为每个部分提供了一个“ 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>

最佳答案

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

关于html - block 级元素相互重叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52938560/

上一篇：html - 对齐溢出滚动与图片高度

下一篇：html - 如何对齐 div 中的元素以使其在一行中与其他元素对齐？

相关文章：

javascript - 从所选下拉列表的数据属性中获取值

php - Bootstrap 的 onmouseover 错误

html - p 标签文本覆盖在响应式 Bootstrap 上？

javascript - 如果 CSS 中存在超过 3 个元素，如何在新行中自动格式化？

javascript - 侧面板中的 HTML 更改宽度

python - Django - 将模板上下文传递给表单

html - CSS 表单设计帮助

css - Rails Link_to 文本但不显示类

html - 如何使这些元素显示水平而不是垂直

java - 从客户端访问远程Linux系统中的文件夹并在客户端浏览器上显示文档

©2024 IT工具网  联系我们