如何使不同高度的卡填充css中的差距？ [英] How do I make cards of different heights fill gap in css?

问题描述

我想创建一组不同高度的卡片，但是我在显示它们时遇到问题，因此在较短的卡片下方没有额外的空间。

I would like to create a group of cards of varying height, but I have had trouble displaying them so that it does not have extra space below the shorter ones.

我希望它看起来像这样：

I want it to look like this:

我不需要的是让卡伸展来填充空间。
我想让下面的卡片向上滑动来填充空格。

What I do not want is to have the cards stretch to fill the space. I want the card below to slide up to fill the space.

这是纯CSS可能的吗？如果没有，我该如何使用Javascript？

Is this possible with pure CSS? If not, how would I do this with Javascript?

这里有一些工作：
http://codepen.io/calebeby/pen/LGaVoL

.row {
    @include display(flex);
    @include flex-wrap(wrap);
}

推荐答案

'masonry - Cascading grid layout library'js for creating these type layouts。

I think you need to adopt 'Masonry - Cascading grid layout library' js for creating these type layouts.

Masonry级联网格布局

Masonry级联网格布局 - 选项< a>

Masonry Cascading Grid Layout
Masonry Cascading Grid Layout - Options

这篇关于如何使不同高度的卡填充css中的差距？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！