html - CSS：响应式设计 - 在两列列表中缩小图像

Question

我有一个包含 6 张图片的无序列表。我希望列表仅在两列中显示图像，然后在窗口调整大小时缩小图像。

这是 jsFiddle 示例的链接：http: //jsfiddle.net/WuwYZ/

目前，如果您的窗口宽度超过 450 像素，那么您将看到 3 列或更多列，如果它小于 300 像素，您将看到 1 列。

如何将列表的最大宽度设置为 300 像素，这样一列就不会超过两列？我怎样才能让图像缩小而不是合并成一列？

两列中的大图像：

 X X
 X X
 X X

当窗口扩展时，它看起来像这样（但我希望它与上面保持相同）：

 X X X X 
 X X

score 4 · Accepted Answer

您只需将宽度设置li为50%;

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

1 回答 1