浮动DIV以填充未使用的空间

Question

使用某个API时，我使用的功能基本上为我提供了几十种类别的设置。为了显示这些，我选择了一个容器DIV并按组拆分设置（4x 25％宽度表），其中每个被解析的组都会出现。

这适用于可变数量的设置的小问题，导致剩余大量未使用的空间。这是由于我将所有内容都浮动而造成的，但是最长的表会导致下一个表格显得更加偏低。

CSS是否支持任何允许将这些表浮动到未使用空间的内容？我突出了屏幕截图中最大的表格以强调。

Answer 1

查看http://masonry.desandro.com/

我将它用于当前项目是好事。我目前在下拉列表中发现Bootstrap和浮动元素的一些问题。虽然没有什么会导致我放弃插件。

Answer 2

试试这个JS方法：

<script>
function renderGrid() {
    var blocks = document.getElementById("container").children;
    var pad = 10,
        cols = 4, //Change this to as much as you want but in this It's 4
        newleft, newtop;
    for (var i = 1; i < blocks.length; i++) {
        if (i % cols == 0) {
            newtop = (blocks[i - cols].offsetTop + blocks[i - cols].offsetHeight) + pad;
            blocks[i].style.top = newtop + "px";
        } else {
            if (blocks[i - cols]) {
                newtop = (blocks[i - cols].offsetTop + blocks[i - cols].offsetHeight) + pad;
                blocks[i].style.top = newtop + "px";
            }
            newleft = (blocks[i - 1].offsetLeft + blocks[i - 1].offsetWidth) + pad;
            blocks[i].style.left = newleft + "px";
        }
    }
}
window.addEventListener("load", renderGrid, false);
window.addEventListener("resize", renderGrid, false);
</script>

现在是HTML部分：

<div id="container">
   <div><p>Your content here!</p></div>
</div>

关于它，但确保你有一个id="container"而不是class="container"也在你的CSS文件中添加这个CSS样式：

#container > div {
position: absolute;
float: left;
width: 25%;
}

结果：使用自动顶部和左侧元素样式自动对齐div。

希望这有效！ -Arqetech