У меня есть три раздела 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>
Кто-нибудь знает, как я могу это решить?
Вы можете добавить свойство float к своему изображению или абзацу, который вы уже добавили. Итак, насколько я понимаю из вашего кода, в классе float:left;
нет смысла.
Удаление subSectionRight
из float:left;
решило вашу проблему, когда я тестировал данные HTML и CSS.
Большое спасибо! Это решило мою проблему :D:D
Не могли бы вы добавить изображение желаемого результата? Непонятно читать ваш код.