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

时间:2015-02-05 05:25:26

标签: jquery html css css-float

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

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

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

enter image description here

2 个答案:

答案 0 :(得分:1)

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

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

答案 1 :(得分:-1)

试试这个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