float的垂直对齐：left div [英] Vertical alignment of float:left div's

问题描述

当设置为float left时，它们不是线性的彼此垂直，而是与上面的行的底部对齐。

我已经嘲笑了一个例子下面，想要摆脱白色空间。你有什么建议吗。

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

解决方案

尝试浮动左边第一个， ，下一个左边，下一个右边....

编辑 - 回应评论。

如果你知道你将获取的最大数量（ span ）（假设它不会超过你所说的10，因为这个方法可能会变得很杂乱非常快），并假设CSS3不是一个选项，你可以尝试这样的东西，

 < style> 
 span，/ *所有跨度获得显示和宽度，奇数跨度获得浮动：left * / 
 span + span + span，
 span + span + span + span + span，
 span + span + span + span + span + span + span {
 display：block; 
 width：250px; 
 float：left; 
} 
 
 span + span，/ *偶数跨度获得浮动：right * / 
 span + span + span + span，
 span + span + span + span + span + span，
 span + span + span + span + span + span {
 float：right; 
} 
< / style> 
  

您需要继续添加 span + span + ... ，直到你达到你将有的最大连续数。上面只有八个。所以这不是最漂亮的方法！

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>

解决方案

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!

这篇关于float的垂直对齐：left div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！