Question

我之前创建了一个关于制作响应式网格的问题，并且感谢所有人的帮助，但是现在我正在努力进行下一阶段。

我想要一个有三列（三个图像）的网格，每个网格的宽度为33.3％。然后我在max-width:100%内部有一个图像，以使它们扩展到容器的宽度。

现在我坚持让它们以平均移动分辨率堆叠。所以基本上当它们变得太小而不能轻易被视为连续三个时，我希望它们连续下降到2行（总共6行共3行），然后在长堆栈中每行减少到一行。 / p>

JS小提琴here

Answer 1

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

在您的具体情况下，您可以执行this demo之类的操作（缩小窗口以查看其中的操作）：

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

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

Answer 2

像this这样的东西是什么？这里的技巧是在产品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;
}

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

2 个答案: