.section-steps {
background-color: #ede3e3;
}
.steps-box:first-child {
text-align: right;
padding-right: 3%;
margin-top: 30px;
}
.steps-box:last-child {
padding-left: 3%;
margin-top: 75px;
}
.app-screen {
width: 40%;
}
.works-step {
margin-bottom: 50px;
}
.works-step:last-of-type {
margin-bottom: 80px;
}
.works-step div {
color: #e67e22;
border: 2px solid #e67e22;
display: inline-block;
border-radius: 50%;
height: 55px;
width: 55px;
text-align: center;
padding: 5px;
float: left;
font-size: 150%;
margin-right: 25px;
}
.button-app img {
height: 50px;
width: auto;
margin-right: 10px;
}<section class = "section-steps">
<div class = "row">
<h2>How it works — simple as 1, 2, 3</h2>
</div>
<div class = "row">
<div class = "col span_1_of_2 steps-box">
<img src = "Resource/img/app-iPhone.png" alt = "Omnifood app on iPhone" class = "app-screen">
</div>
<div class = "col span_1_of_2 steps-box">
<div class = "works-step">
<div>1</div>
<p>Choose the subscription plan that best fits your needs and sign up today.</p>
</div>
<div class = "works-step">
<div>2</div>
<p>Order your delicious meal using our mobile app or website. Or you can even call us!</p>
</div>
<div class = "works-step">
<div>3</div>
<p>Enjoy your meal after less than 20 minutes. See you the next time!</p>
</div>
<a href = "#" class = "button-app"><img src = "Resource/img/download-app.svg" alt = "App Store Button"></a>
<a href = "#" class = "button-app"><img src = "Resource/img/download-app-android.png" alt = "Play Store Button"></a>
</div>
</div>
</section>визуализированный результат выглядит как следующие изображения:

Высота <section class = "section-steps"> должна быть равна высоте всего дочернего элемента <section class = "section-steps">, но, как вы видите на изображении, красная граница указывает высоту <section class = "section-steps">. Но высота его должна быть зеленой каймой. В чем проблема в моем коде? Пробую по-разному такие четкие: как после всплытия, но безуспешно. Любая идея?
Плавающие элементы не учитываются при расчете высоты элемента.
Извините, ваш пример не воспроизводит вывод, который вы показываете как свою проблему, и, как указал Connexo, у нас недостаточно информации о других потенциальных факторах, таких как дополнительные классы css и общий макет DOM, для эффективного устранения проблемы.
Я использую структуру css responseivegridsystem.com.
FWIW @NazninAkter, если вам не нужно поддерживать старые браузеры, я бы использовал систему сеток, которая использует flexbox, а не float. Вы выбрали бит "устаревший".






Когда вы перемещаете что-либо, он выталкивает это из содержащего элемента, поэтому высота .section-steps не может быть определена его дочерними элементами.
Просмотрите фрагмент в полноэкранном режиме, чтобы увидеть эффект. (Чтобы более широкий абзац не опускался ниже (2), вам нужно будет задать ему гибкую ширину с помощью flex-box CSS.)
.section-steps{
background-color: #ede3e3;
}
.steps-box{
}
.steps-box:first-child{
text-align: right;
padding-right: 3%;
margin-top: 30px;
}
.steps-box:last-child{
padding-left: 3%;
margin-top: 75px;
}
.app-screen{
width: 40%;
}
.works-step{
margin-bottom: 50px;
}
.works-step:last-of-type{
margin-bottom: 80px;
}
.works-step span{
color: #e67e22;
border: 2px solid #e67e22;
display: inline-block;
border-radius: 50%;
height: 55px;
width: 55px;
text-align: center;
padding: 5px;
font-size: 150%;
margin-right: 25px;
}
.works-step p {
display: inline-block;
}
.button-app img{
height: 50px;
width: auto;
margin-right: 10px;
} <section class = "section-steps">
<div class = "row">
<h2>How it works — simple as 1, 2, 3</h2>
</div>
<div class = "row">
<div class = "col span_1_of_2 steps-box">
<img src = "Resource/img/app-iPhone.png" alt = "Omnifood app on iPhone" class = "app-screen">
</div>
<div class = "col span_1_of_2 steps-box">
<div class = "works-step">
<span>1</span>
<p>Choose the subscription plan that best fits your needs and sign up today.</p>
</div>
<div class = "works-step">
<span>2</span>
<p>Order your delicious meal using our mobile app or website. Or you can even call us!</p>
</div>
<div class = "works-step">
<span>3</span>
<p>Enjoy your meal after less than 20 minutes. See you the next time!</p>
</div>
<a href = "#" class = "button-app"><img src = "Resource/img/download-app.svg" alt = "App Store Button"></a>
<a href = "#" class = "button-app"><img src = "Resource/img/download-app-android.png" alt = "Play Store Button"></a>
</div>
</div>
</section>
Вы, может быть, забыли упомянуть какой-то CSS-фреймворк, который используете? Что делают
.rowи.col?