Html 创建具有响应图像的响应网格、堆栈

早些时候，我提出了一个关于建立一个响应网格的问题，多亏了这里所有人的帮助，它才得以工作，但现在我正努力进入下一阶段

我想要一个有三列（三幅图像）的网格，每列的宽度为33.3%。然后我在

max width:100%

中有一个图像，以使它们能够缩放到容器的宽度

现在我坚持让它们以平均移动分辨率堆叠。所以本质上，当它们变得太小以至于很难被视为一行中的三个时，我希望它们下降到一行中的2个（3行共6个图像），然后下降到一个长堆栈中的每行一个

JS Fiddle是你想要的东西吗？这里的诀窍是在乘积div上设置一个绝对最小宽度，它与float属性相结合，为您提供了所需的结果

#content{
  width:90%;
  margin-top: 60px;
  margin-left:5%;
  margin-right:5%;
}

.product{
    width:33.3%;
    min-width:100px;
    display:block;
    float: left;
}

.product img{
max-width:100%;
}

body{
    background-color:#666;
}

---

在继续之前，您可能需要学习和了解

在您的特定情况下，您可以执行以下操作（缩小窗口以查看其实际操作）：

---

……等等。这可以通过许多不同的方式完成，这取决于您的项目。

您仍然需要最小宽度，因为否则它们将不会进一步下降到1列+1但是对于媒体查询，我不记得了。谢谢@Asad，顺便说一句，

product

是一个div，默认显示为

block

，所以从0到450px，它们将占据一整行没有问题。从0到450，它们仍然具有50%的宽度，因为您显式地将它们设置为那样，并且它们是浮动的。您可以继续为每个范围定义此值，但我认为最好的方法是简单地定义您认为图像的最小外观良好宽度（以及可选的最大外观良好宽度）您能留下一条注释解释否决票，以便我可以改进答案吗？谢谢

.product{
    width:50%; /* initially, each row contains 2 products */
    float: left;
    /* no need for display:block; */
}

@media screen and (min-width:450px) { /* <--- this is a media query */

    /*
        everything inside this media query will be processed
        only if the viewport is larger then 450px
    */

    .product{
        width:33.3%; /* larger screens will diplay 3 products per row */
        /* float is already declared */
    }

}

.product{
    /* nothing here! 1 product per row */
}

@media only screen and (min-width:450px) and (max-width:1023px) {
    .product{
        width:50%; /* 2 products per row */
        float:left;
    }
}

@media screen and (min-width:1024px) {
    .product{
        width:33.3%; /* 3 products per row */
        float:left;
    }
}