漂浮不同高度的div，填补空白空间

Question

我有3个浮动div（第二个/绿色/比第三个/蓝色/更高），而视口更窄，我想最后（第三个）div将在第一个div下面（填充）空白空间。

我可以通过使用媒体查询来实现这一目标：

@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/如何在没有媒体查询的情况下实现此效果（我不知道div高度）。提前谢谢！

Answer 1

试试这个：

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和默认边距和填充的数字）。