С некоторой помощью я собрал раздел "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>