使用float重新排序div块

Question

我正在使用的页面目前有一个流体容器。

如果窗口宽度超过960px，它可以调整到屏幕宽度，如果低于960px，它将保持固定在960px。这是为了适应更大屏幕的用户。

我要显示三个列表：

<div id="list1" style="float:left;width:500px">...</div>
<div id="list2" style="float:left;width:500px">...</div>
<div id="list3" style="float:left;width:500px">...</div>

但是当容器大于1000px时，希望以不同的方式对它们进行排序。

我试过申请clear没有好运。有没有办法在不使用javascript的情况下实现以下目的？

Answer 1

我能想到的最简单的方法是使用CSS媒体查询。

如果宽度为960或更小，请不要漂浮它们。

如果它大于960，float list1和list3到left，float列表2到right。

即

<div id="list1"></div>
<div id="list2"></div>
<div id="list3"></div>​

和css

#list1 {
    background: #202020;
    height: 50px;
}
#list2 {
    background: #404040;
    height: 150px;
}
#list3 {
    background: #606060;
    height: 50px;
}

@media (min-width: 960px){
    #list1 {
        width: 50%;
        float: left;    
    }
    #list2 {
        width: 50%;
        float:right;   
    }    
    #list3 {
        width: 50%;
        float: left;
    }
}​

请参阅http://jsfiddle.net/8ZVhS/进行演示。

Answer 2

除非你使用JS来获得＃list2的动态高度，否则我认为没有在＃list3上放置负margin-top是可能的。