Почему высота div фиксируется на определенное значение, если высота не установлена?

.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 &mdash; 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>

визуализированный результат выглядит как следующие изображения:

Почему высота div фиксируется на определенное значение, если высота не установлена?

Высота <section class = "section-steps"> должна быть равна высоте всего дочернего элемента <section class = "section-steps">, но, как вы видите на изображении, красная граница указывает высоту <section class = "section-steps">. Но высота его должна быть зеленой каймой. В чем проблема в моем коде? Пробую по-разному такие четкие: как после всплытия, но безуспешно. Любая идея?

Вы, может быть, забыли упомянуть какой-то CSS-фреймворк, который используете? Что делают .row и .col?

connexo 13.12.2018 18:35

Плавающие элементы не учитываются при расчете высоты элемента.

connexo 13.12.2018 18:38

Извините, ваш пример не воспроизводит вывод, который вы показываете как свою проблему, и, как указал Connexo, у нас недостаточно информации о других потенциальных факторах, таких как дополнительные классы css и общий макет DOM, для эффективного устранения проблемы.

Chris W. 13.12.2018 18:40

Я использую структуру css responseivegridsystem.com.

Naznin Akter 13.12.2018 18:43

FWIW @NazninAkter, если вам не нужно поддерживать старые браузеры, я бы использовал систему сеток, которая использует flexbox, а не float. Вы выбрали бит "устаревший".

hungerstar 13.12.2018 19:12
Улучшение производительности загрузки с помощью 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 страниц, которые помогут...
3
5
63
1

Ответы 1

Когда вы перемещаете что-либо, он выталкивает это из содержащего элемента, поэтому высота .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 &mdash; 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>

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