Question

到目前为止，我有 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%;
    }
}

Answer 1

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

例如。连续5张图片：

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

img:nth-child(5n+5) { margin: 0 0 10% 0; }

Answer 2

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

3项目行更棘手。你不能完美地确定它们的大小，但你可以尝试32％+ 0.5％的保证金。幸运的是，你不希望有这样的行大小！

对于您的响应式设计，如18％+ 1％，21 + 2％，42 + 4％和88 + 6％这样可以使边距保持一致。

在基于百分比的响应式布局中分离DIV

2 个答案: