使用浮动重新排列div块

Question

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

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

我有三个列表中显示：

<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> 

，但希望他们不同的顺序当容器比1000像素大。

我试过申请clear没有好运气。有没有办法实现以下不使用JavaScript？

Answer 1

最简单的方式动态高度我认为要做到这一点是使用CSS媒体查询。

如果它是960宽或更少，不要浮动它们。

，如果它比960，float列表1和项目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

我不认为那可能没有把负margin-top上＃项目list3除非你使用JS来获取＃列表2