2

我正在创建一个全宽的图像网格，它使用媒体查询来更改有多少列图像。你可以在这里看到一个工作演示：http: //vitaminjdesign.com/grid/

使用img{max-width: 100%}图像拉伸到其容器的宽度。这很好用，并且演示正在运行。如您所见，每个图像之间应该有 1px 的空间。我使用的是边界框模型，所以空间是通过使用 padding-right 创建的。

但是，如果您调整窗口大小，您会注意到图像之间的 1px 边距有时会发生变化，并且似乎在图像之间/下方具有这些不一致的空白量。

在检查每张图像后，浏览器会以略微不同的尺寸（1px 差异，但仅此而已）渲染图像。这会产生这些不均匀的线条。问题是，如果每个图像的尺寸完全相同，它们是如何以略微不同的尺寸呈现的（这又会导致这个布局问题）？如果您检查每张图像，您会注意到尺寸有时不同，有时相同（取决于屏幕宽度）。

下面的CSS：

    * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
    #work{width:100%; clear:left;}
    #work li{width:20%; height:auto; padding-right: 1px;  padding-bottom: 1px; float:left; position: relative;  transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -webkit-transition: all 0.1s ease-in-out;}
    #work li a{display: block; position: relative; width: 100%; height: auto;}
    #work li img{display: block; max-width: 100%; height: auto; }

我不会在这里列出媒体查询，但它们所做的只是改变列表项的宽度。

关于为什么会发生这种情况以及如何解决它的任何想法？

4

3 回答 3

0

删除 * 选择器上的边距属性为我解决了这个问题。

* {
  -moz-box-sizing: border-box;
  font-weight: normal;
  padding: 0;
}
于 2012-12-07T19:24:38.177 回答
0

问题是因为每个列表项都有一个计算宽度。因为除了最后一列之外的所有列都有一个 padding-right / border-right，它们实际上具有不同的宽度，从而使图像具有不同的宽度/高度。通过删除列的最后一项上的零填充/边框规则，所有图像都具有完全相同的宽度和高度。

于 2012-12-07T19:28:44.740 回答
0

问题出在您的媒体查询和第 n 个子选择器上。但我不太确定为什么设置border-right: none;会为网格添加 1px 的高度。要解决此问题，只需删除border-right: none;此选择器内部：

#work li:nth-child(3n+3) {
   border-right: none; //Delete this
}


#work li:nth-child(2n+2) {
   border-right: none; //Delete this
}
于 2012-12-07T19:40:37.893 回答