Столбцы в секции тегов укладывают друг на друга, а не рядом друг с другом

Question

У меня есть три столбца внутри тега раздела в HTML, но они сидят друг над другом, а не стоят рядом друг с другом.

<section class="sec-top">
    <div style="background-color:#f4f5f9">
        <div class="column">
            <h2 style="padding-left: 100px; padding-top:40px; color:#3d7cc9;">Lorem ipsum dolor sit amet.</h2>
            <p style="padding-left:100px;">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac pharetra turpis. Sed vitae orci.
            </p>
            <ul class="checkmark">
                <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
                <li>Duis eu lorem ut risus sollicitudin bibendum.</li>
                <li>uspendisse malesuada augue sit amet ipsum laoreet, eget consequat purus consequat.</li>
            </ul>
        </div>

        <div class="column">
            <img class="gify" src="../../assets/apps.gif" />
        </div>

        <div class="column">
            <div class="backgroundBlue">
                <h2 class="ptop">Lorem Ipsum</h2>
                <h3>Lorem ipsum dolor sit amet.s</h3>
                <iframe width="90%" frameborder="0"></iframe>
            </div>
        </div>
    </div>
</section>

Я не уверен, что я делаю неправильно или почему это происходит. Любая помощь приветствуется. Спасибо!

Answer 1

A div является элементом уровня блока. Это означает, что даже если вы уменьшите его width, это все равно приведет к созданию новой строки:

Элемент уровня блока всегда начинается с новой строки и занимает всю доступную ширину ( тянется влево и вправо, насколько это возможно). https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements

См. Также: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow

Вам необходимо либо изменить значение display на .column (или его родитель) или удалите его из нормального потока с помощью float.

См. примеры ниже.

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

Во втором примере я изменил контейнер div на модель flexbox и добавил flex: 1 1 33% к каждому column. Это приведет к тому, что каждый столбец всегда будет занимать 33% ширины родительского элемента. Вот отличный ресурс о flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.column {
  width: 33%;
  float: left;
}
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

.gify {
  max-width: 100%;
}

.flex-parent {
  display: flex;
  flex-direction:row;
}

.flex-parent>.column {
  flex: 1 1 33%;
  float: none;
}

<section class="sec-top">
    <strong>Using Float</strong>
    <div style="background-color:#f4f5f9;" class="clearfix">
        <div class="column">
            <h2 style="padding-left: 100px; padding-top:40px; color:#3d7cc9;">Lorem ipsum dolor sit amet.</h2>
            <p style="padding-left:100px;">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac pharetra turpis. Sed vitae orci.
            </p>
            <ul class="checkmark">
                <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
                <li>Duis eu lorem ut risus sollicitudin bibendum.</li>
                <li>uspendisse malesuada augue sit amet ipsum laoreet, eget consequat purus consequat.</li>
            </ul>
        </div>

        <div class="column">
            <img class="gify" src="https://via.placeholder.com/450" />
        </div>

        <div class="column">
            <div class="backgroundBlue">
                <h2 class="ptop">Lorem Ipsum</h2>
                <h3>Lorem ipsum dolor sit amet.s</h3>
                <iframe width="90%" frameborder="0"></iframe>
            </div>
        </div>
    </div>
</section>
<section class="sec-top" style="margin-top:30px">
    <strong>Using FlexBox</strong>
    <div style="background-color:#f4f5f9;" class="flex-parent">
        <div class="column">
            <h2 style="padding-left: 100px; padding-top:40px; color:#3d7cc9;">Lorem ipsum dolor sit amet.</h2>
            <p style="padding-left:100px;">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac pharetra turpis. Sed vitae orci.
            </p>
            <ul class="checkmark">
                <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
                <li>Duis eu lorem ut risus sollicitudin bibendum.</li>
                <li>uspendisse malesuada augue sit amet ipsum laoreet, eget consequat purus consequat.</li>
            </ul>
        </div>

        <div class="column">
            <img class="gify" src="https://via.placeholder.com/450" />
        </div>

        <div class="column">
            <div class="backgroundBlue">
                <h2 class="ptop">Lorem Ipsum</h2>
                <h3>Lorem ipsum dolor sit amet.s</h3>
                <iframe width="90%" frameborder="0"></iframe>
            </div>
        </div>
    </div>
</section>