材质化CSS-不同高度的网格布局

MaterializeCSS - Grid Layout with different heights(材质化CSS-不同高度的网格布局)

本文介绍了材质化CSS-不同高度的网格布局的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我更喜欢MaterializeCSS而不是Bootstrap,因为它们支持Google Material Design。到目前为止,我真的很喜欢它,它有许多有用的组件,甚至在Java部分也是如此。但我最错过的是不同高度的动态网格布局。如果你听不懂我的英语,你可以看看这张图片。我希望它如图1所示。有没有一种方法可以在不使用其他Java框架/库的情况下完成它?

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

这篇关于材质化CSS-不同高度的网格布局的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:材质化CSS-不同高度的网格布局

基础教程推荐