Vertical alignment of float:left div's

问题

I have about 10 div's of equal widths but varying height and I want them to fit together as tight as possible.

When set to float left they do not line up to each other vertically but instead are aligned to the bottom of the "row" above.

I've mocked up a little example below and want to get rid of the white space. Do you have any suggestions. I'm limited to using this format because the content that is delivered externally.

Cheers

<div style="width:500px;">
<div style="display:block; width:250px; height:100px; background-color:#333; float:left;"></div>
<div style="display:block; width:250px; height:180px; background-color:#888; float:left;"></div>
<div style="display:block; width:250px; height:130px; background-color:#354689; float:left;"></div>
<div style="display:block; width:250px; height:90px; background-color:#181; float:left;"></div>
</div>

回答1:

Try floating the first one left, then next one right, the next one left, and the next one right ....

EDIT - In response to comments.

If you know the maximum number of span's that you will ever fetch (and assuming it's not much more than the 10 you stated (as this method could get very messy very fast), and assuming CSS3 is not an option you could try something like this,

<style>
    span, /* all spans get display and width, odd spans get float:left */
    span+span+span, 
    span+span+span+span+span, 
    span+span+span+span+span+span+span {
        display:block;
        width:250px;
        float:left;
    }

    span+span, /* even spans get float:right */
    span+span+span+span, 
    span+span+span+span+span+span, 
    span+span+span+span+span+span+span+span {
        float:right;
    }
</style>

You'd need to keep adding span+span+...'s until you've reached the maximum number of consecutive ones you will ever have. The above only matches eight. So it's not the prettiest method!

回答2:

Your scenario could use more clarification.

If they are always the same height, you can hard code their arrangement. To fix your mockup:

<div style="width:500px;">
<div style="display:block; width:250px; height:100px; background-color:#333; float:left;"></div>
<div style="display:block; width:250px; height:180px; background-color:#888; float:left;"></div>
<div style="display:block; width:250px; height:130px; background-color:#354689; float:left; margin-top: -80px;"></div>
<div style="display:block; width:250px; height:90px; background-color:#181; float:left;"></div>
</div>

But that's pretty obvious and probably doesn't help you because they probably have indeterminably random heights. In that case, since they're always the same width and you always have 10 of them, you can group them in vertical stacks of 3 or 4, and then make each stack flush with one another.

<div style="width:250px; float:left;">
<div style="display:block; width:250px; height:100px; background-color:#333; float:left;"></div>
<div style="display:block; width:250px; height:180px; background-color:#888; float:left;"></div>
<div style="display:block; width:250px; height:130px; background-color:#354689; float:left;"></div>
</div>
<div style="width:250px; float:left;">
<div style="display:block; width:250px; height:90px; background-color:#181; float:left;"></div>
<div style="display:block; width:250px; height:180px; background-color:red; float:left;"></div>
<div style="display:block; width:250px; height:100px; background-color:#333; float:left;"></div>
</div>
<div style="width:250px; float:left;">
<div style="display:block; width:250px; height:80px; background-color:#333; float:left;"></div>
<div style="display:block; width:250px; height:140px; background-color:#888; float:left;"></div>
<div style="display:block; width:250px; height:160px; background-color:#354689; float:left;"></div>
</div>

来源：https://stackoverflow.com/questions/4445960/vertical-alignment-of-floatleft-divs

标签

css

html

css-float

vertical-alignment