html - 12 列基础网格中的 12 列以上

Question

我有这样的结构:

<div class="row">
    <div class="columns small-12 large-6 medium-12 panel-wrapper">
         Box no 1
    </div>
    <div class="columns small-12 large-6 medium-12 panel-wrapper">
         Box no 2
    </div>
    <div class="columns small-12 large-6 medium-12 panel-wrapper">
         Box no 3
    </div>
    <div class="columns small-12 large-6 medium-12 panel-wrapper">
         Box no 4
    </div>
</div>

显然行有 2 列，而我有 4 个框。这些盒子是可变高度的，所以均衡器不是一个选项。我想要做的是让第 3 列低于第 1 列，第 4 列低于第 2 列，但不是两行，因为它会产生很大的差距。 有没有一种简单的方法可以在不使用砌体或类似东西的情况下做到这一点，因为砌体没有按预期工作。它只是通过绝对定位将所有列堆叠在一起并保持原样。

当它们的高度相同时，这不是问题。工作正常。但是当第一列高于第二列时，第三列低于第二列，第四列低于第一列但第三列的高度差距很大。

Answer 1

我建议您使用 CSS3 Flexbox。你会在这里找到你需要的一切:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

它可以很容易地让你的行或列成为你想要的，并且让事情变得平等。有史以来最好的模板，包含在 CSS3 中，因此不会使您的应用程序使用 JS 变得更重。