1

我想做一种网格画廊。我希望它具有响应性，所以我想使用带有百分比的浮点数。

在 css 中浮动状态它将占用空白空间。（我可能错了，它可能只适用于水平而不是垂直）。

我试过这段代码：

css

#wrapper {
    width:100%;
}
.blocks{
    width:25%;
    float:left;
    border:2px solid green;
    margin:5px;
}

html

<div id="wrapper">
    <div class="blocks">
        <img src="http://i.stack.imgur.com/DOPHF.jpg"/>
    </div>
     <div class="blocks">
        <img src="http://i.stack.imgur.com/ppuwO.jpg"/>
    </div>
     <div class="blocks">
        <img src="http://i.stack.imgur.com/t2QF9.jpg"/>
    </div>
    <div class="blocks">
        <img src="http://i.stack.imgur.com/MAVHu.jpg"/>
    </div>
    <div class="blocks">
        <img src="http://i.stack.imgur.com/XpHOP.jpg"/>
    </div>
</div>

JSfiddle

在 Jsfiddle 中，图像 1 和图像 5 之间存在间隙。

为什么会发生如何占据空白空间。

注意：图像大小是可变的，所以它应该动态调整。不需要硬编码。

还有其他制作网格画廊的方法吗？这里有什么问题？

4

2 回答 2

2

如果你想让它响应式地工作，你会想要

display:inline;

为此，不

float:left;

尽管该解决方案需要一些额外的工作，但我还有另一个建议。

我想你可能会对Twitter Bootstrap感兴趣，因为它面向响应式设计，并且有专门的网格布局来处理这类事情。

于 2013-11-12T12:49:23.270 回答
0

如果您有可变高度/宽度的块，那么获得一个可以适应任何组合的 CSS 解决方案将令人沮丧地难以捉摸。您可能最好使用jQuery Masonry之类的 JS 路线

或者，您可以随时裁剪/调整图块的内容，并使用类似这样的东西

于 2013-11-12T12:48:50.120 回答