Html 如何使这些图像以所需的方式响应？

我想让六个大小相同的图像在两行3中对齐，然后在屏幕大小改变时堆叠。我得到了3 x 2堆叠，但它不会响应。我还想让它接触到窗户的边缘

以下是html代码：

我希望它看起来像这样：

一旦屏幕尺寸下降，我想让它互相叠在一起

请帮忙

看看媒体查询。这样，您可以根据屏幕大小调整样式。当然，您可以自己编写所有内容，但我建议您看看引导

样本：

/* extra small devices, phones */
@media (min-width: 320px) {
    .container a img { width: 100%; float:none; }
}
/* small devices, tablets */
@media (min-width: 700px) {
    .container a img { width: 50%; float: left; }
}

使用此css，图像将采用100%或50%的宽度。Bootstrap为不同的屏幕大小提供了类，可用于定义元素如何响应、显示/隐藏等。您甚至可以对元素重新排序。 剥去你不需要的零件，而不是重新发明轮子

---

祝你好运

像这样的怎么样？图像的宽度为33%，因此3个图像将适合整个屏幕，直到屏幕尺寸下降，并将其设置为100%

<div class='container'>
<a href="URL"><img src="images/photos/placeholder.jpg" ></a>
<a href="URL"><img src="images/photos/placeholder.jpg" ></a>
<a href="URL"><img src="images/photos/placeholder.jpg" ></a>
<a href="URL"><img src="images/photos/placeholder.jpg" ></a>
<a href="URL"><img src="images/photos/placeholder.jpg" ></a> 
<a href="URL"><img src="images/photos/placeholder.jpg" ></a> 
</div>

.container img {
    width: 33%;
    float: left;
    margin: 0;
}
@media (max-width: 400px) {
    .container img {
        width: 100%;
        float: none;
    }
}

---

谢谢你，迈克尔。我会试试这个，让你知道会发生什么。我还将尝试使用引导。

<div class='container'>
<a href="URL"><img src="images/photos/placeholder.jpg" ></a>
<a href="URL"><img src="images/photos/placeholder.jpg" ></a>
<a href="URL"><img src="images/photos/placeholder.jpg" ></a>
<a href="URL"><img src="images/photos/placeholder.jpg" ></a>
<a href="URL"><img src="images/photos/placeholder.jpg" ></a> 
<a href="URL"><img src="images/photos/placeholder.jpg" ></a> 
</div>

.container img {
    width: 33%;
    float: left;
    margin: 0;
}
@media (max-width: 400px) {
    .container img {
        width: 100%;
        float: none;
    }
}