使用浮動重新排列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