更新

Question

我已经做了一些搜索，但我无法找到我正在寻找的东西。我正在使用jquery mobile的photoswipe插件滚动我的图像，但我需要在我的页面上很好地显示它们。我喜欢类似iPhone的照片网格，就像我点击iPhone上的照片时会发生什么，然后将这些照片链接到PhotoSwipe。此外，它需要格式化为PhotoSwipe。

这纯粹是css吗？如果是这样，有人可以帮我解决造型问题吗？我对css很可怕我没有这样的设计思维。（我理解，我只是不擅长）。

有什么想法吗？

Answer 1

<div id="container">
    <img src="..." />
</div>

CSS -

#container img {
    float  : left;
    width  : 30%;
    height : auto;
}

这将在每一行上放置三个图像，它们将始终只是填充屏幕（应留有10％的宽度留作间距）。

以下是演示：http://jsfiddle.net/sy764/

更新

我将容器设为UL元素，并将每个图像包装在LI元素中。这是用于使图像显示为页面宽度的大约三分之一的CSS：

#container li {
    float   : left;
    width   : 30%;
    height  : auto;
    padding : 3px;
}

#container li img {
    width  : 100%;
    height : auto;
}

以下是演示：http://jsfiddle.net/sy764/1/

Answer 2

查看http://www.photoswipe.com/latest/examples/04-jquery-mobile.html处的示例，在列表元素上设置此项：

.gallery li {
float: left;
width: 33.33333333%;
}

如果li及其所有内容，则设置宽度。

Answer 3

我对这个答案迟到了，但这是PhotoSwipe在jQueryMobile示例中使用的确切css值：

.gallery { list-style: none; padding: 0; margin: 0; }
.gallery:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; }
.gallery li { float: left; width: 33.33333333%; }
.gallery li a { display: block; margin: 5px; border: 1px solid #3c3c3c; }
.gallery li img { display: block; width: 100%; height: auto; }
#Gallery1 .ui-content, #Gallery2 .ui-content { overflow: hidden; }

jQuery Mobile类似iPhone的图库

3 个答案:

更新