Javascript 将html页面中的图像堆叠在尽可能多的列中

我的另一个HTML/CSS/JS障碍

我有12张照片需要放在这样的页面中：

• 它们应该占据尽可能多的列（可能不超过4列）
• 它们应该拉伸以填充所有可用空间（因此，如果有一列，图像的宽度为100%，如果有两列，则为50%，如果有三列，则为33%，依此类推）
• 如果图像小于某个大小，则布局应更改为较少的列

这段代码对其中的一部分进行了修改，但并没有完全删减：只有当图像在3列中时，图像才会填满所有可用的空间，并且图像的最小大小为160px；而且缩放页面也不正常，至少在Opera中是这样：

img.photoGallery {
   min-width: 160px;
   max-width: 32%;     
   float: left;
}

---

桌子不能这样做。CSS似乎也没有。我可能会求助于JavaScript，尽管我不愿意依赖它。那么，有没有一个我不知道的技巧，可以帮我解决这个问题呢？

用“最大宽度：32%”代替“最大宽度：100%”怎么样？如果你想让一个图像适合它的容器宽度，你应该把它的宽度设置为100%。但是，我无法正确地可视化您的布局，因此这可能不是您想要的。

是否确实要让浏览器重新调整图像的大小？如果让图像保持其自然大小（这通常是一个好主意），并使其浮动，那么事情就应该正常工作。您可以使用边距设置在图像之间添加分隔。是的，我同意浏览器调整图像大小，而且，是的，我上面描述的效果就是我想要的。我不希望一张图像填满所有可用空间（除非容器的宽度小于320px-大于320px，否则我希望两个图像适合可用宽度，大于480px-三个，以此类推）。