html - 流体网格中的 div 在断点处跳跃大小

Question

代码太长，无法发布，但基本上我有几个 div/部分，旨在通过 float 网格进行响应。它们看起来像这样:

            <div class="col-4">
              <section>
                <img src="https://tf-assets-prod.s3.amazonaws.com/tf-curric/WEB-DEV-001/2.6.3_challenge_responsive_layout/rey_square.png" />
                <b>Rey</b>
                <p class="expl">xxxx</p>
              </section>
            </div>

在 745px(给予或接受)处，第二行分开并将第一个 img 一直推到右边并改变高度。我的猜测是它与 float 有关，但我真的无法改变它。 此外，当拖动到 640px 以下时，第一张图像看起来很好，但第二张和所有后续图像在其图像旁边显示标题。发生这种情况的原因是什么？我该如何解决？

Repl.it

Answer 1

既然你不能使用 flex，那么你可以通过使用 nth-child 来解决这个问题。下面将针对 3 列布局的每一行中的第一个元素，除了第一行，它无论如何都不需要这个

.col-4:nth-child(3n+1) {
    clear: left;
}

我建议你把它放在一个媒体查询范围内，这样它就不会影响其他宽度。如果你不把它放在一个范围内，你可能需要编写额外的 css 来稍后覆盖它