0

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

所以我从这里的 Pinterest 风格的图像展示中获得了灵感。当我将它放入我自己的代码中时，它基本上可以工作，除了取决于页面缩放，中间列没有用我的#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;
}
4

0 回答 0