CSS DIV торчит из другого DIV

У меня есть три раздела DIV, два из которых являются подразделом «Левый» (для выравнивания по левому краю), а один в середине — правым подразделом (для выравнивания по правому краю). Я использую класс для этих DIV и использовал класс subSectionLeft для первого и третьего и subSectionRight для второго. Однако верхняя часть третьего раздела div выходит за пределы второго раздела, из-за чего он выступает из второго.

Это изображение моей проблемы.

#contentSection {
  width: 100%;
  background-color: rgb(236, 236, 236);
  margin-top: 2%;
  margin-bottom: 2%;
  padding-top: 2%;
  padding-bottom: 2%;
}

.subSectionLeft {
  width: 90%;
  margin: 2%;
  padding: 2%;
  padding-bottom: 12%;
  padding-left: 3%;
  background-color: red;
}

.subSectionLeft .sectionTitle {
  width: 60%;
  height: 60%;
  margin-bottom: 2%;
  background-color: rgb(236, 236, 236);
  float: left;
  display: block;
}

.subSectionLeft .sectionContent {
  width: 60%;
  height: 60%;
  margin-bottom: 2%;
  background-color: rgb(236, 236, 236);
}

.subSectionLeft .sectionIMG {
  width: 40%;
  float: right;
  background-color: rgb(236, 236, 236);
  position: relative;
  display: flex;
  margin: auto;
}

.subSectionLeft .sectionIMG img {
  width: 100%;
  height: 250px;
  display: block;
  margin: auto;
  position: relative;
}

.subSectionRight {
  width: 90%;
  height: 100%;
  margin: 2%;
  padding: 2%;
  padding-bottom: 12%;
  padding-left: 3%;
  background-color: rgb(236, 236, 236);
  float: left;
  display: block;
}

.subSectionRight .sectionTitle {
  width: 60%;
  height: 60%;
  margin-bottom: 2%;
  background-color: rgb(236, 236, 236);
  float: right;
  display: block;
  text-align: right;
}

.subSectionRight .sectionContent {
  width: 60%;
  height: 60%;
  margin-bottom: 2%;
  background-color: rgb(236, 236, 236);
  left: 60%;
  float: right;
  display: block;
  text-align: right;
}

.subSectionRight .sectionIMG {
  width: 40%;
  float: left;
  position: relative;
  background-color: rgb(236, 236, 236);
  display: block;
  margin: auto;
}

.subSectionRight .sectionIMG img {
  width: 100%;
  height: 250px;
  position: relative;
  display: block;
  margin: auto;
}
<div class = "subSectionLeft">
  <div class = "sectionTitle">
    <h1>Advanced & Innovative Technology</h1>
  </div>
  <div class = "sectionIMG">
    <img src = "../IMAGES/hardboilder.jpg" alt = "">
  </div>
  <div class = "sectionContent">
    <h3>
      Voila cars use technologies developed by world-class engineers who aim to create the best mode of transportation for you.
    </h3>
  </div>

</div>

<div class = "subSectionRight">
  <div class = "sectionTitle">
    <h1>Impeccable Modern Style</h1>
  </div>
  <div class = "sectionIMG">
    <img src = "../IMAGES/Hyundai-Prophecy.jpg" alt = "">
  </div>
  <div class = "sectionContent">
    <h3>Modern and Elegant. Voila cars are designed with these ideas in mind and deliver only the best of the best for you.</h3>
  </div>
</div>

<div class = "subSectionLeft">
  <div class = "sectionTitle">
    <h1>Environmental Friendly</h1>
  </div>
  <div class = "sectionIMG">
    <img src = "../IMAGES/Green-Car.jpg" alt = "">
  </div>
  <div class = "sectionContent">
    <h3>Voila cars use environmental friendly technologies, allowing us to protect and improve the condition of the beautiful gift of nature around us.</h3>
  </div>

</div>

Кто-нибудь знает, как я могу это решить?

Не могли бы вы добавить изображение желаемого результата? Непонятно читать ваш код.

AbsoluteBeginner 26.12.2020 20:17
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
1
1
178
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете добавить свойство float к своему изображению или абзацу, который вы уже добавили. Итак, насколько я понимаю из вашего кода, в классе float:left; нет смысла.

Удаление subSectionRight из float:left; решило вашу проблему, когда я тестировал данные HTML и CSS.

Большое спасибо! Это решило мою проблему :D:D

William K 27.12.2020 06:10

Другие вопросы по теме