浮动div具有不同的高度，填充空格 [英] Floating divs with different height, fill empty space

问题描述

我有3个浮动div（第二/绿色/高于第三/蓝色/），虽然视口较窄我想要最后（第三）div将采取（填充）第一个div下面的空白空间。

I have 3 floating divs (second /green/ is taller than third /blue/) and while viewport is narrower I would like to last (third) div would take (fill) empty space below first div.

我可以通过使用媒体查询：

I could achieve this by using media queries:

@media only screen and (max-width : 750px) 
{
    #third
    {
        margin-top: -100px;
    }
}

@media only screen and (max-width : 500px) 
{
    #third
    {
        margin-top: 0px;
    }
}

请参阅jsFiddle： http://jsfiddle.net/s2G5J/15/ 如何achive这种效果没有媒体查询（我不知道divs高度） 。提前感谢！

See jsFiddle: http://jsfiddle.net/s2G5J/15/ How to achive this effect without media queries (I don't know divs height). Thank you in advance!

推荐答案

试试这个：


HTML

Try this:

HTML

    <div id="container">
        <div id="first"></div>
        <div id="second"></div>
        <div id="third"></div>
    </div>

CSS

#container
{
    max-width: 500px;
}

#first, #second, #third
{
    width: 250px;    
}

#first, #third
{
    float: left;    
    height: 100px;
}

#second
{
    float: right;
    height: 200px;
}

#first
{
    background-color: yellow;    
}

#second
{
    background-color: lime;
}

#third
{
    background-color: blue;
}

@media only screen and (max-width : *500px*) 
{
    #container > div
    {
        float: none;
    }
}

你可能会注意到石灰盒向右漂浮一段时间后得到极限。这只是因为身体和周围的东西的边缘和垫。根据周围的元素（516px是jsfiddle的数字和默认边距和paddings）设置数字包围星号。

You probably notice how the lime box floats to the right for a while after getting the limit. That's just because of the margins and paddings of the body and the things around it. Just set number surrounded with asterisks according to the elements around it (516px is the number for jsfiddle and default margins and paddings).

这篇关于浮动div具有不同的高度，填充空格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！