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

Question

我之前创建了一个关于制作响应式网格的问题，并且由于这里每个人的帮助而使其正常工作，但现在我正在为下一阶段而苦苦挣扎。

我想要一个包含三列（三幅图像）的网格，每列的宽度为 33.3%。然后我在里面有一个图像max-width:100%，以使它们缩放到容器的宽度。

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

JS小提琴在这里

Answer 1

在继续之前，您可能需要学习如何使用媒体查询和响应式设计。

在您的特定情况下，您可以执行类似此演示的操作（缩小窗口以查看它的运行情况）：

.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

你在找这样的东西吗？这里的诀窍是在产品 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;
}