Floating DIV's to fill unused space

问题

When working with a certain API, I am using a function that basically provides me with dozens of categories of settings. To display these, I opted to have a container DIV and split the settings by group (4x 25% width tables) where each group that is parsed appears next.

This is working fine with the small issue of variable amounts of settings, resulting in a lot of unused space being left over. This is caused by me floating everything left, but the longest table causes the next table to appear much further down.

Does CSS support anything that would permit floating these tables into the unused space? I highlighted the largest table on the screenshot for emphasis.

回答1:

Check out http://masonry.desandro.com/

Im using it for a current project it is good. I am currently finding a few issues with Bootstrap and floating elements within a dropdown. Though nothing that will cause me to drop the plugin.

回答2:

Try this JS method:

<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>

And now the HTML part:

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

And that's about It but make sure you have an id="container" instead of a class="container" also add this CSS style Inside your CSS file:

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

Result: automatic alignment of you divs with automatic top and left element styles.

Hope this works! -Arqetech

来源：https://stackoverflow.com/questions/28336769/floating-divs-to-fill-unused-space

标签

jquery

html

css

css-float