使用响应式图像创建响应式网格、堆栈

Question

我之前创建了一个关于制作响应式网格的问题，并在这里的每个人的帮助下让它工作，但现在我正在努力进行下一阶段。

我想要一个有三列(三个图像)的网格，每个都有33.3%的宽度。然后，我在max-width:100%中创建了一个图像，以便使它们缩放到其容器的宽度。

现在我坚持让它们堆叠在一个平均的移动分辨率上。所以从本质上讲，当它们变得太小而不能很容易地被视为一行三个时，我希望它们降到一行两个(使3行共6个图像)，然后在一个长堆栈中降到每行只有一个。

JS小提琴here

Answer 1

在继续学习之前，您可能需要学习how to use media queries和responsive design。

在您的特定情况下，您可以执行类似于的操作(缩小窗口即可查看实际效果)：

.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元素中将包含什么内容。只要掌握媒体查询，你就可以做任何变化。

例如，如果你想在小屏幕上每行只有一个产品，你可以这样做：

.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;
    }
}

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

Answer 2

像this这样的东西是你要找的吗？这里的技巧是在product 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;
}