实现具有相同宽度但不同高度的 css 卡片答案

【问题标题】：Materialize css cards with same width but different heights实现具有相同宽度但不同高度的 css 卡片
【发布时间】：2016-07-15 02:41:59
【问题描述】：

我正在尝试构建一个显示多张不同高度的卡片的屏幕，但是一旦它们具有不同的高度，它们就会将其发送到最高卡片的下方，如下所示：result

但我想放在下一个它应该在它下面的位置，像这样：desired result

我的结构很简单：

<body>
    <main>
        <div class="section">
            <div class="row container">
                <div class="col s12 m6 l4">CARD</div>
                <div class="col s12 m6 l4">CARD</div>
                <div class="col s12 m6 l4">CARD</div>
                <div class="col s12 m6 l4">CARD</div>
                <div class="col s12 m6 l4">CARD</div>
                <div class="col s12 m6 l4">CARD</div>
                <div class="col s12 m6 l4">CARD</div>
                <div class="col s12 m6 l4">CARD</div>
                <div class="col s12 m6 l4">CARD</div>
            </div>
        </div>
    </main>
</body>

我尝试在 cols div 中使用浮点数，但没有任何结果... 有人知道如何制作我想要的东西吗？谢谢。

【问题讨论】：

标签： css materialize

【解决方案1】：

我尝试过使用 flexbox，但没有成功。

但我发现了这个惊人的 jQuery 库：http://masonry.desandro.com/

将我的结构更改为

<body>
    <main>
        <div class="section">
            <div class="row container">
                <div class="cards">
                    <div class="col s12 m6 l4">CARD</div>
                    <div class="col s12 m6 l4">CARD</div>
                    <div class="col s12 m6 l4">CARD</div>
                    <div class="col s12 m6 l4">CARD</div>
                    <div class="col s12 m6 l4">CARD</div>
                    <div class="col s12 m6 l4">CARD</div>
                    <div class="col s12 m6 l4">CARD</div>
                    <div class="col s12 m6 l4">CARD</div>
                    <div class="col s12 m6 l4">CARD</div>
                 </div>
            </div>
        </div>
    </main>
</body>

并使用了这些行：

$('.cards').masonry({
    itemSelector: '.col',
});

【讨论】：

【解决方案2】：

您可能会考虑使用 flexbox 而不仅仅是一个网格，它应该对我使用这些类型的布局有很大帮助。

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

【讨论】：

这是黄金。 Flex 需要成为任何网格布局系统的新标准。