html - 带有图像的 CSS 固定侧边菜单，换行

Question

我SIDEmenu在我的页面上固定了一个位置。它包含 100 个小图像。每个图像为 10 像素 x 10 像素。

如何使图像垂直换行？

我的意思是如果浏览器高度为 500，那么它将以 2 列显示图像，如果浏览器屏幕高度为 250，则 4 列......就像垂直自动换行一样。

这可能使用 HTML 和 CSS 吗？

补充：=左边是固定的菜单栏，有100个小图。我试图让它在 iphone 和电脑上工作。图片用于浏览网站，因此每张图片都很重要。在 iphone 上，底部的图像被剪掉了，所以我想把它们包装起来。所以基本上我需要在较小的屏幕上使菜单更宽以适合所有菜单图像

score 0 · Accepted Answer

一种选择是使用 css3 的媒体查询：

@media (min-height:500px) and (max-height:1000px){
  #sidebar { width:20px; }
}

这是我制作的一个基本示例，您可以通过调整浏览器大小来尝试（当然，如果它支持 css3 媒体查询）

score 0 · Accepted Answer

如果你浮动：离开你的图像，并且侧边栏是一个 div，高度以 % 为单位，图像将简单地根据大小浮动。我会试着举一个例子。

score 0 · Accepted Answer

在你的 SIDEmenu 中试试这个 CSS 属性，

.sidemenu {
         width:25%;
         height:auto;
         float:left;
}

记住，在这个 DIV 结束后使用一个 clear:both

3 回答 3