CSS/JS: Floating block elements of differing heights?

问题

Here’s what I'm working with.

As you can see, I’ve got a lot of block elements, that I want to get into five columns.

However, since they’re of differing height, they don’t respond well to being floated. (Hence the huge hole in the middle of the page.)

I know I’ve seen a JS workaround, that calculated the heights and put the elements where they’d fit, but I can’t for the life of me find it now — anyone remember it, or have any other ideas? ;)

回答1:

Maybe what you'd like is: http://desandro.com/resources/jquery-masonry/

It's configurable.

回答2:

You can actually remedy your case by simply putting a block for every 5 floating elements that has a style of clear:both

example:

<article class="bloggpost"></article>
<article class="bloggpost"></article>
<article class="bloggpost"></article>
<article class="bloggpost"></article>
<article class="bloggpost"></article>
<div style='clear:both'></div>

回答3:

If you don't mind relying on JS for a proper layout, why not set up five <div> elements, like columns, each of which is a certain width (you can give them an HTML class and then set their width dynamically if you choose)? You can total the heights of the block elements and then use JS to tell it how many to drop into each column <div>. This can work dynamically on the onresize event. The code would be very easy to write, even more so If you're using jQuery.

回答4:

If you don't mind each element being the same height as the tallest try this function (jquery):

function evenHeights(element) {
    var x = 0;
    $(element).each(function(){
        var h = $(this).height();
        if (h > x) x = h;
    });

    $(element).each(function() {
        var thumbHeight = x;
        $(this).height(thumbHeight);
    });
}

and call evenHeights($(".bloggpost")); within your $(document).ready(function()

来源：https://stackoverflow.com/questions/3722907/css-js-floating-block-elements-of-differing-heights

标签

javascript

css

css-float