css - 不同高度的 float div，填充空白

Question

我有 3 个 float div(第二个/green/比第三个/blue/高)，虽然视口(viewport)较窄，但我想最后一个(第三个)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;
    }
}

您可能会注意到石灰盒在获得限制后如何向右浮动一段时间。那只是因为 body 的边距和填充以及它周围的东西。只需根据周围的元素设置用星号包围的数字(516px 是 jsfiddle 的数字和默认边距和填充)。