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/