html - 向左浮动的行为就像向右浮动

Question

我正在浮动一堆我想出现在画廊中的图像。它们应该只出现在整齐的行中。它们的大小都一样，所以我想我可以通过将 ul 的所有 li 向左浮动并将它们设置为 " display: block;."来做到这一点。

密码是“ataska”

score 2 · Accepted Answer

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

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

score 0 · Accepted Answer

0

我删除了 margin-right: 20 并且排列得很好。

于 2013-02-15T07:55:23.197 回答

score 0 · Accepted Answer

0

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

于 2013-02-15T07:56:49.743 回答

score 0 · Accepted Answer

ul发生这种情况是因为您向右添加了边距，然后第 4 个项目不适合margin:0. 或者只是减少margin-right:15px它会适合。

score 0 · Accepted Answer

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

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

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

此外，您有一个margin-rightof元素12.5px。li（使用它不太好），您可以15 px毫无问题地制作它。

5 回答 5