2

我有一个 680 像素宽的 div，我想在其中显示一些缩略图。每个拇指宽 64 像素，它们之间有 24 像素的边距。然后 8 * 64 + 7 * 24 = 680。但第八个拇指也将应用其边距，因此它不再适合 680 像素 (8 * (64 + 24) = 704)。

我通过手动将每隔八个拇指的边距设置为 0 来修复它，但我想知道 CSS 是否可以以适当的方式处理这个问题。

这是代码。

4

3 回答 3

2

您可以使用第n 个子选择器。

img:nth-child(8n) { margin:0 }

你在这里说的是：“对于每 8 个 img 元素，应用 0 边距”。

这是您更新的代码- 我还删除了内联 CSS。

请注意，并非所有浏览器都支持此功能。

于 2013-02-01T07:19:23.650 回答
1

使用img:nth-child(8n)是正确的答案，但它只有在我们制作另一个<div>周围的拇指然后应用margin: 12px 0到每个第 8 个孩子（在这种情况下也是第 8 个 img 元素）时才会起作用。

关键是：它并不适用于每 8 个img-element。此选择器选择每 8个也是img. 有一个微妙但重要的区别。

即，如果容器中有一个段落和图像列表，则不会使用 img:nth-child(8n)选择器选择第 8 个图像，因为它不是第 8 个孩子。在那种情况下，第 7 个 img 将是第 8 个孩子，因此被选中。这是示例。

于 2013-02-01T08:22:39.043 回答
1

您可以在缩略图周围添加一个容器，并在其上指定一个负左边距，等于间距，在您的情况下为 24px。然后只需在所有图像上添加左边距。容器的负边距就像每行中第一个图像的边距的排水沟......

*Example CSS*
.thumbnailcontainer{ 
    margin-left:-24px; 
    } 
.thumbnail { 
    float:left; 
    margin: 8px 0px 8px 24px; 
    } 

*Example HTML markup*
<div class="thumbnailcontainer">
    <img src="thumb1" class="thumbnail">
    <img src="thumb2" class="thumbnail">
    <img src="thumb3" class="thumbnail">
    ....
</div>
于 2013-02-01T12:23:19.813 回答