CSS：響應式設計 - 在兩列列表中縮小圖像

Question

我有一個包含6張圖片的無序列表。我希望列表僅在兩列中顯示圖像，然後在窗口調整大小時縮小圖像。

這裏是的jsfiddle樣本的鏈接：http://jsfiddle.net/WuwYZ/

此刻，如果你的窗口是在450像素寬，那麼你會看到3個或更多的列，而如果是300像素下，你會看到1列。

如何將列表的最大寬度設置爲300px，以便永遠不會超過兩列？ 如何讓圖像縮小而不是合併到一列中？

大圖片在兩列：

X X 
X X 
X X 

當窗口擴展它看起來像這樣（但我希望它留在上面一樣）：

X X X X 
X X 

Answer 1

你只需要設置寬度爲li至50%;

#thumbs{ 
    max-width:300px; 
} 
#thumbs li { 
    width: 50%; 
    float: left; 
} 
#thumbs li img { 
    width: 100%; 
} 

http://jsfiddle.net/WuwYZ/2/