CSS3中的列数 - 控制溢出和定位所需的专业知识

Question

编辑：我想我只需要帮助理解列计数功能，这是非常新的，我没有找到太多的支持。溢出，浮动等的默认值是什么？我似乎无法控制这些事情。我的列是否齐平似乎几乎是随机的，并且很大程度上取决于缩放。我评论了我认为它可能与calc（）函数有关，高度和宽度在某些缩放上舍入有趣。

所以我从Pinterest风格的here图像中获得灵感。当我把它放到我自己的代码中时，它基本上工作除了，取决于页面缩放，中间列没有充实我的#photo_wrapper顶部。

大部分时间它都是顶部的肉体，但在一些缩放级别上有一个巨大的空间。关于如何解决这个问题的任何想法？

正如你从我的代码中可以看到的那样，我一直在抛出很多东西，没有任何东西可以统一。

以下是Flickr上图片的链接：http://flic.kr/p/h7W2PT

这是CSS样式：

#photo_wrapper{
    -webkit-column-count: 3; 
    -webkit-column-gap: 10px; 
    -webkit-column-fill: auto; 
    -moz-column-count: 3; 
    -moz-column-gap: 10px; 
    -moz-column-fill: auto; 
    column-count: 3; 
    column-gap: 15px; 
    column-fill: auto;
    vertical-align: top;
}

.photo_container{
/*where all the images are stored)*/
    width: calc(100% - 10px); /*this seems to work fine*/
    margin: auto auto 5px auto;
    float: left;
    float: top;
    clear: none;

    vertical-align: top;

    display: inline-block;

    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
}