0

到目前为止，我有这个JsFiddle - 使用媒体查询的 DIV 排列随着区域宽度的减小而变化，并保持适合 100% 容器宽度的布局。

我遇到的问题是试图分开，DIV因为布局是基于百分比的。

到目前为止，我为包含边距所做的努力未能使所有内容保持完美格式。

在这里的任何帮助将不胜感激。

这是CSS...

#photos {
   /* Prevent vertical gaps */
   line-height: 0;
   width: 100%;
}
#photos img {
  /* Just in case there are inline attributes */
  width: 20%;
  height: auto;
  float:left;
  overflow:hidden;
}

@media (max-width: 1200px) {
    #photos img {
    /* Just in case there are inline attributes */
    width: 20%;
    }
}

@media (max-width: 800px) {
    #photos img {
    /* Just in case there are inline attributes */
    width: 25%;
    }
}
@media (max-width: 400px) {
    #photos img {
    /* Just in case there are inline attributes */
    width: 50%;
    }
}
@media (max-width: 300px) {
    #photos img {
    /* Just in case there are inline attributes */
    width: 100%;
    }
}
4

2 回答 2

2

如果您知道要连续查看多少张图像，您也可以使用百分比作为边距。

例如。连续 5 张图片：

img { width: 15% ; margin: 0 10% 10% 0;}

img:nth-child(5n+5) { margin: 0 0 10% 0; }
于 2012-09-10T09:58:05.263 回答
0

我通常使用 1-2% 的边距来处理基于整页宽度的设计的边距。例如，如果我有一排 5 张图片，我有 18% 的宽度和 1% 的边距，所以一个项目的水平宽度（包括边距）是 20%。23% + 1%(*2) = 25% 相同。

3 项行更棘手。您无法完美调整它们的大小，但您可以尝试 32% + 0.5% 的边距。幸运的是，您不想拥有这样的行大小！

对于您的响应式设计，像 18% + 1%、21 + 2%、42 + 4% 和 88 + 6% 这样的值会使边距保持在一定范围内。

于 2012-09-10T10:00:09.993 回答