纯css方式将图像放在一行中

Question

是否有一种纯css方法可以使图像在可变大小的容器中排列成行？

我有一排我想适合的图像。

我知道有两种方法可以将图像排列成一行。如果我将图像宽度设置为百分比，即width: 20%，那么如果屏幕很宽，则图像会变得非常大，或者如果显示器很小，则图像就会变得非常小。如果我将图像设置为绝对宽度，即width: 100px;，那么图像将以我想要的大小显示。但容器没有完全装满，右侧有不体面的剩余空间。

现在我正在使用javascript根据用户屏幕宽度调整百分比宽度。

有没有一种纯粹的css方法来控制图像的显示方式，这样，如果屏幕很宽，更多的图像可以放进一行，而不是把它们放大，但仍然确保所有图像都紧贴在容器中，没有多余的空间。

Answer 1

您可以向每个图像容器添加float属性（float:left）。看见http://css.maxdesign.com.au/floatutorial/tutorial0407.htm

Answer 2

我使用的媒体查询如下：

@media all and (max-width: 900px) and (min-width: 600px)
  img
    width 50%
@media all and (max-width: 1050px) and (min-width: 900px)
  img
    width 33.3333%
@media all and (max-width: 1280px) and (min-width: 1050px)
  img
    width 25%
@media all and (max-width: 1910px) and (min-width: 1600px)
  img
    width 16.6667%

我认为还有更好的答案。