我一直在研究和试验 HTML5 和 CSS3,旨在创建一个非常简单但高效的平铺画廊/网格系统。
下面是我创建的。问题是,image/div 分布在不同浏览器之间发生变化,为什么会这样?我们能控制它吗?
我尝试添加 "column-fill: auto"
但没有成功。我做错了什么?
这是一个有效的 Fiddle .
HTML:
<div class="grids">
<div class="gridElement">
<img alt="image" src="assets/images/image.jpg">
</div>
<div class="gridElement">
<img alt="image" src="assets/images/image.jpg">
</div>
<div class="gridElement">
<img alt="image" src="assets/images/image.jpg">
</div>
<div class="gridElement">
<img alt="image" src="assets/images/image.jpg">
</div>
<div class="gridElement">
<img alt="image" src="assets/images/image.jpg">
</div>
<div class="gridElement">
<img alt="image" src="assets/images/image.jpg">
</div>
</div>
CSS:
/*Grids System*/
.grids {
width: 100%;
overflow: hidden;
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 10px;
-moz-column-gap: 10px;
column-gap: 10px;
}
.grids.twoGrids {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
.grids.fourGrids {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
.grids .gridElement {
margin-bottom: 10px;
overflow: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
}
.grids .gridElement:last-child {
margin-bottom: 0;
}
.grids .gridElement img {
min-width: 100%;
}
最佳答案
语法
column-fill: auto or balance;
值(value)观
auto : Fills columns sequentially.
balance (by default) : content equally between columns, if possible.
CSS
column-fill: balance; /* W3C */
-webkit-column-fill: balance; /* Safari & Chrome */
-moz-column-fill: balance; /* Firefox */
-ms-column-fill: balance; /* Internet Explorer */
-o-column-fill: balance; /* Opera */
关于html - 在 css 列内分布,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23082304/