浮动不同高度的div，填充空白

Question

我有 3 个浮动 div（第二个 /green/ 比第三个 /blue/ 高），虽然视口较窄，但我想最后一个（第三个）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 和默认边距和填充的数字）。