我使用 float:left 方法用 HTML 和 CSS 创建了 div 网格系统。
它工作正常,但是只要同一行中的两个 div 之间存在可变高度差,下一个 div 就会从最底部的位置开始,就在具有最大高度的 div 的正下方。
这是代码笔: http://codepen.io/anon/pen/GJZWoX
CSS:
.parent{
width:330px;
}
.red{
float:left;
width:150px;
height:150px;
margin-bottom:10px;
margin-left:10px;
background-color:red;
}
.blue{
float:left;
width:150px;
height:300px;
margin-bottom:10px;
margin-left:10px;
background-color:blue;
}
有没有办法只使用 css 来解决这个错误?任何好的答案将不胜感激。
这就是我要找的:
谢谢
最佳答案
只是 CSS?使用 flexbox 你可以 http://demosthenes.info/blog/844/Easy-Masonry-Layout-With-Flexbox
但我会选择 Javascript 作为一种更健壮(并且在发布时浏览器支持略好)的方法。
通过 JQuery Masonry http://masonry.desandro.com/ (IE9+支持)
关于javascript - div 之间的网格高度问题?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30218115/