【发布时间】：2018-10-13 17:33:17
【问题描述】：
我想得到类似的东西：
我正在使用 Bulma，目前我正在使用带有 is_multiline 选项的 Columns。但我唯一能得到的是：
我想消除卡片之间的差距，我想使用更多的弹性框选项。它也必须具有响应性。
.card-columns {
column-count: 1;
column-gap: 1.5rem;
padding: 1.5rem;
}
.card-columns .card {
display: inline-block;
width: 100%;
margin-bottom: 1.5rem;
}
.columns-6 {
column-count: 6;
}
.columns-5 {
column-count: 5;
}
.columns-4 {
column-count: 4;
}
.columns-3 {
column-count: 3;
}
.columns-2 {
column-count: 2;
}
.columns-1 {
column-count: 1;
}
@media (max-width: 768px) {
.columns-6-mobile {
column-count: 6;
}
.columns-5-mobile {
column-count: 5;
}
.columns-4-mobile {
column-count: 4;
}
.columns-3-mobile {
column-count: 3;
}
.columns-2-mobile {
column-count: 2;
}
.columns-1-mobile {
column-count: 1;
}
}
@media (min-width: 769px) {
.columns-6-tablet {
column-count: 6;
}
.columns-5-tablet {
column-count: 5;
}
.columns-4-tablet {
column-count: 4;
}
.columns-3-tablet {
column-count: 3;
}
.columns-2-tablet {
column-count: 2;
}
.columns-1-tablet {
column-count: 1;
}
}
@media (min-width: 1024px) {
.columns-6-desktop {
column-count: 6;
}
.columns-5-desktop {
column-count: 5;
}
.columns-4-desktop {
column-count: 4;
}
.columns-3-desktop {
column-count: 3;
}
.columns-2-desktop {
column-count: 2;
}
.columns-1-desktop {
column-count: 1;
}
}
@media (min-width: 1216px) {
.columns-6-widescreen {
column-count: 6;
}
.columns-5-widescreen {
column-count: 5;
}
.columns-4-widescreen {
column-count: 4;
}
.columns-3-widescreen {
column-count: 3;
}
.columns-2-widescreen {
column-count: 2;
}
.columns-1-widescreen {
column-count: 1;
}
}
@media (min-width: 1408px) {
.columns-6-fullhd {
column-count: 6;
}
.columns-5-fullhd {
column-count: 5;
}
.columns-4-fullhd {
column-count: 4;
}
.columns-3-fullhd {
column-count: 3;
}
.columns-2-fullhd {
column-count: 2;
}
.columns-1-fullhd {
column-count: 1;
}
}<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.css" rel="stylesheet"/>
<div class="card-columns columns-6-fullhd columns-5-widescreen columns-4-desktop columns-3-tablet columns-2-mobile">
<div class="card card-content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
<div class="card card-content">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </div>
<div class="card card-content">There are many variations of passages of Lorem Ipsum available</div>
<div class="card card-content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
<div class="card card-content">Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</div>
<div class="card card-content">There are many variations of passages of Lorem Ipsum available</div>
<div class="card card-content">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </div>
<div class="card card-content">Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</div>
</div>编辑：我尝试了以下解决方案之一，但它在 4 列以上不起作用。我更新了sn-p。
【问题讨论】：
-
这里可以选择 JavaScript 吗？这很简单，否则请参阅stackoverflow.com/questions/43901955/…，基本上就是这样。还有stackoverflow.com/questions/44377343/css-only-masonry-layout
-
您是否考虑过
css grids或者您正在寻找一个完全跨浏览器的解决方案。 -
@BobbyAxe CSS 网格布局的一个重要警告是，如果您事先知道每个框的尺寸，它仅适用于砖石布局；它不能动态工作。这在这里可能不是问题，但我觉得应该提到它以防万一。
-
@BobbyAxe 不，我没有，但这对我来说似乎是一个很好的解决方案，因为我会知道每个盒子的尺寸。