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%

我认为有更好的答案。

纯css方式，以适合一行中的图像

2 个答案: