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个盒子。这些盒子的高度可变，因此不能选择均衡器。我想要做的是让第三列低于第一列，第四列低于第二列，但不是两行，因为它会产生很大的差距。 有没有一种简单的方法来做到这一点，而不使用砖石或类似的东西，因为砌体没有按预期工作。它只是将所有列叠加在一起，并使用绝对定位并保持这种方式。

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

Answer 1

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

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

它可以使您的行或列非常容易，并使事情变得平等。最好的模板，包括在CSS3中，所以不会让你的应用程序更重JS。