html - div每行有4张图像

我要在内容的每一行中包含4张图像div
在插入前四张图像后，它们将显示在第一行中。如果我添加更多图像，它将转到下一行，直到达到四个数字，然后它将转到下一行，依此类推。
我希望它的样式设置为，每当我尝试缩小浏览器窗口的大小时，图像就会彼此下移，以使每行显示的图片数量均衡。

<div id="content">
   <img src="pic1.jpg" alt="pic1">
   <img src="pic1.jpg" alt="pic1">
   <img src="pic1.jpg" alt="pic1">
   <img src="pic1.jpg" alt="pic1">
</div>

我尝试了上面的代码，并为content div设置了一些样式。但是我没有得到理想的结果。

最佳答案

#content img { width:25%; float:left; }

您可能需要使用视口标记（在HTML头中）

<meta name="viewport" content="width=device-width, initial-scale=1">

这样您就可以使用

@media screen and (max-width: 768px) { }

并将其更改为例如

#content img { width:50%; float:left; }

当图像的尺寸变得不再实用（太小）而无法查看时。