浮动左侧表现得像浮动一样

Question

我正在浮动一堆我想要出现在画廊中的图像。它们应该只出现在整齐的行中。它们的大小都是一样的，所以我想我可以通过浮动所有剩下的li并将它们设置为“display: block;来实现这一点。”

相反，他们这样做：http://packardcarbs.myshopify.com/products/standard-8-1929-1931

密码为“ataska”

Answer 1

并非所有图像的高度都相同。在第一行中，您的第一张图像为149px高，接下来的两张图像为146px高。因此，当您分解到下一行时，图像将从原始第一张图像的左侧开始向上3px。如果你希望它们在漂亮的网格中正确对齐，你需要确保它们都具有相同的高度。

将height: 160px应用于所有列表项可解决问题（您的最高图像高160像素）。

Answer 2

我删除了右边缘：20并且事情很顺利。

Answer 3

删除边距，它会排成一行......

Answer 4

这是因为您添加了右边距，然后第4项不适合ul，如果您需要边距，则需要for循环或其他内容然后将类添加到第4个元素，如{{1} }。或者只是减少margin:0，它将全部适合。

Answer 5

从我看到你也可以这样做：

ul#thumbs li a {
   display:block;
   width:160px;
   height:160px;
   overflow:hidden;
}

这样，无论高度如何，图像都会对齐（如果高于160px;则会隐藏其中的一部分）

此外，margin-right元素上有12.5px li个15 px。 （使用它不太好），你可以毫无问题地使它{{1}}。