Question

我有一个使用Materialise构建的网格系统，其中cols的高度不等（动态内容）。

每行应该有3个cols。我希望每一行都从一个新行开始。但是，这是我得到的结果 - https://codepen.io/anon/pen/QaVKyG。正如你所看到的，第四张卡似乎从一个奇怪的地方开始，在左边留下了很多空白区域。

我已尝试使用此处显示的flexbox - https://codepen.io/anon/pen/rpqLgy

.row { display:flex; flex-wrap: wrap; }

但是，这种方法的问题是最后一行的cols似乎没有对齐左边。

简而言之，我希望网格的工作方式与使用bootstrap时的方式相同（例如https://codepen.io/anon/pen/vpVvKv）。正如您所看到的，对于bootstrap，下一行的cols从下一行开始，即使cols具有不相等的高度。我无法通过Materialise实现这一目标。

感谢任何解决方案的任何帮助（使用flexbox或没有flexbox）。谢谢！

Answer 1

我不确定这是否是你想要实现的目标..

我做的是创建一个cardHolder，然后在里面创建卡片

<div class="cardHolder">
  <div class="card"></div>
  <div class="card2"></div>
  <div class="card3"></div>
</div>

然后我为卡片的父母做了一个弹性框样式..

.cardHolder{
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  flex-flow: row wrap;
  width:100%;
}

之后我设置卡片的宽度，因为你希望每行有3列。我做了一个calc函数来初始化卡片的宽度

.cardHolder div{
  width:calc(100% / 3);
  padding:0;
  margin:0;
}

然后创建媒体查询，以在屏幕尺寸小于600像素时初始化卡片的整个宽度。

@media only screen and (max-width: 600px){
  .cardHolder div{
   width:100%; 
  }
}

希望这有帮助。

Answer 2

您也可以使用相同的max-height和min-height.Ex-

.card{
     border:1px solid black; 
     min-height:450px; 
     max-height:450px
     }

这将使您的卡大小相同并对齐。