html - 在 css 列内分布

Question

我一直在研究和试验 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%;
}

Answer 1

W3.org

语法

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 */