Question

我在HTML的section标签内有三列，但它们彼此并排放置，而不是彼此相邻。

currentShape

我不确定我在做什么错或为什么会这样。任何帮助表示赞赏。谢谢！

Answer 1

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>

section标签中的列彼此堆叠，而不是彼此堆叠

1 个答案: