Question

我想制作一种网格图库。我希望它具有响应性，所以我想用浮动百分比。

浮在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之间存在差距。

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

注意：图片大小可以更改，因此应该动态调整。不需要硬编码。

制作网格图库的任何其他方式？这有什么问题？

Answer 1

如果您希望它能够起作用，那么您需要

display:inline;

为此，而不是

float:left;

虽然该解决方案需要一些额外的工作，所以我还有另一个建议。

我认为您可能对Twitter Bootstrap感兴趣，因为它围绕响应式设计而定，并且专门针对这样的事情进行网格布局。

Answer 2

如果你有可变的高度/宽度块，那么获得一个可以容纳任何组合的CSS解决方案将会令人沮丧地难以捉摸。你可能最好使用类似jQuery Masonry

的JS路线

或者，您始终可以裁剪/调整平铺内容的大小，并使用like this

如何在css中制作占用空白空间的网格图库？

2 个答案: