Jquery 如何在css中创建占用空白空间的网格库？

我想做一个网格画廊。我希望它是响应性的，所以我想使用浮动百分比

浮动在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>

在JSFIDLE中，图1和图5之间存在间隙

为什么会发生这样的事？如何占据这片空白

注意：图像大小是可变的，因此应该动态调整。无需硬编码

---

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

如果您有可变高度/宽度的块，那么获得一个可以容纳任何组合的CSS解决方案将是令人沮丧的难以捉摸。您可能最好选择JS路线，比如

---

或者，您可以随时裁剪/调整互动程序的内容，并使用一些功能，如果您希望它能够响应您的需要，您可以

display:inline;

为了这个，不是吗

float:left;

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

---

我想你可能会对它感兴趣，因为它是以响应性设计为导向的，并且有专门的网格布局用于类似的事情。

使用表格会有帮助吗？如图所示，这最终取决于您想要的效果、提供的内容以及您准备做出的权衡。好的。您能找到图像1和图像5之间存在差距的原因吗？这只是浮动在CSS中的工作原理，一旦水平浮动被crowdingThanks清除，它就可以水平而不是垂直工作。我会看看引导。你能找到为什么JSFIDLE中会出现这种差距吗？我已经理解了你想要更好地实现的目标。我认为您应该查看引导，创建一个包含3或4列的行，并用图像填充每列。那么东西就不会固定在同一高度上了。