如何使这些图像以他们需要的方式响应？答案

【问题标题】：how to make these images respond the way they need to?如何使这些图像以他们需要的方式响应？
【发布时间】：2015-02-17 08:32:53
【问题描述】：

我想让六个相同大小的图像排列成两行，每行 3 个，然后在屏幕大小发生变化时堆叠。我得到了 3 x 2 堆叠，但它不会响应。我也希望它接触到窗口的边缘。

这里是html代码：

<div class='container'>
    <a href="URL"><img src="images/photos/placeholder.jpg" style="float: left; width: 33.3%; margin: 0px;" ></a>
    <a href="URL"><img src="images/photos/placeholder.jpg" style="float: left; width: 33.3%; margin: 0px;" ></a>
    <a href="URL"><img src="images/photos/placeholder.jpg" style="float: left; width: 33.3%; margin: 0px;" ></a>
</div>

我希望它看起来像这样：

https://drive.google.com/file/d/0ByScraIkl4P9TUYzWm9vbDE0N1U/view?usp=sharing

一旦屏幕尺寸减小，我希望它叠放在一起。

请帮忙！！

【问题讨论】：

标签： html css layout

【解决方案1】：

这样的事情怎么样？图片的宽度为 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;
    }
}

https://jsfiddle.net/lemoncurry/5zeLxbnt/

【讨论】：

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

【解决方案2】：

查看媒体查询。这样您就可以根据屏幕大小调整样式。当然你可以自己写一切，但我建议你看看 bootstrap。

示例：

/* 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 提供了针对不同屏幕尺寸的类，可随时用于定义元素如何响应、显示/隐藏等。您甚至可以对元素重新排序。剥离你不需要的部分，而不是重新发明轮子。

祝你好运！

【讨论】：