MaterializeCSS - 具有不同高度的网格布局

我喜欢MaterializeCSS，因为它们支持Google Material Design，因此比Bootstrap更多。到目前为止，我非常喜欢它，即使在javascript部分也有很多有用的组件。但我最缺少的是具有不同高度的动态网格布局。如果你没有得到我的英语，看看图像。我希望如图1所示。有没有办法做到这一点，而不使用其他JavaScript框架/库？MaterializeCSS - 具有不同高度的网格布局

来源

2016-12-07 Sylnois

，我认为日ere无法像纯粹的css那样在包装算法中获得该布局，即使是flexbox，也不会考虑空白空间并将其包装到下一行中。您的示例更加复杂，因为项目顺序取决于网格中已放置项目占用的最小高度。 –

你可以使用[这个算法]（https://jsfiddle.net/4e32zLna/），它将产生一个n维数组，每列中放置一些项目。使用Flexbox或百分比宽度布置这些列，并垂直让列中的默认布局堆栈项目。然后，您可以使用任何视图库（例如React）来渲染它。 [请参阅此处的React解决方案]（https://jsfiddle.net/4e32zLna/） –

一个纯CSS的解决方案将利用该column财产。

但请注意，如果内部div具有相同的宽度，这将仅适用。

HTML

<section> 
    <img src="path" /> 
    <img src="path" /> 
    <img src="path" /> 
    <img src="path" /> 
</section>

CSS

body{ 
    margin: 0; 
} 

section{ 
    column-width: 300px; 
    column-gap: 5px; 
    padding: 5px; 
} 

section img{ 
    width: 100%; 
}

演示

Pen

来源

2016-12-07 13:01:28 SvenL

MaterializeCSS - 具有不同高度的网格布局

回答

相关问题