Question

代码太长，无法发布，但基本上我有几个div /部分，意味着通过浮动网格响应。它们看起来像这样：

            <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一直向右推，并改变高度。我的猜测是它与浮子有关，但我真的无法改变它。此外，当拖动640px以下时，第一个图像显示正常，但第二个和所有后续图像显示其图像旁边的标题。导致这种情况发生的原因是什么？如何解决？

Repl.it

Answer 1

由于您无法使用flex，因此可以使用nth-child来解决此问题。以下将针对3列布局的每一行中的第一个项目，除了第一行不需要此项

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

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

流体网格中的div在断点处跳跃

1 个答案: