0

哇，有一段时间了。无论如何，我一直在为我的一个小实验而苦苦挣扎。我想要做的是用动态内容填充页面并由 Masonry 相应地安排它。这是我的一些代码：

* {
    margin: 0;
    padding: 0;
}

#container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.photo { width: 25%; }

.photo img { width: 100%; }

砌体通常被称为：

$(function() {
    $('#container').imagesLoaded(function() {
        $('#container').masonry({
            itemSelector: '.photo',
            isAnimated: false
        });
    });
});

但是，当我查看页面时，所有照片都重叠或有随机空白，并且内容不会拉伸或收缩以匹配窗口大小/屏幕分辨率。

我希望做的是让照片可以填满整个网页，根据窗口大小/屏幕分辨率改变大小，以模拟“平铺背景”显示。除此之外，我想使用 Masonry 实现照片的无缝定位（没有任何类型的空白）。我已经查找了一些使用 Masonry 的“网格”布局示例，但它们在应用于我的场景时似乎不起作用。

我将不胜感激任何帮助！

4

1 回答 1

0

您需要添加 "float: left" 和 "margin: 0 auto" 以使它们以您想要的方式工作。

.photo { width: 25%; float: left; margin: 0 auto}

http://jsfiddle.net/mastermindw/Wuwsh/2/

于 2013-06-02T21:17:42.200 回答