0

好的，所以我将尽力解释这一点。我创建了一个小部件，它将根据类别从主页上的帖子中提取特色图像。现在它吸引了 4 个帖子。我希望可以选择加入 2、3、4 或 6 个帖子。我还想根据进来的帖子数量来改变布局。是否可以只显示 2、3、4 或 6 个帖子，我将如何根据进来的帖子数量来改变布局。我在想它会为每个帖子数量或类似的东西引用css中的一个容器类。任何链接、教程或建议将不胜感激！谢谢， - 迈克尔

4

1 回答 1

0

纯 CSS

这提供了一种 CSS3 方法来实现您想要的，并为 CSS2 提供了一个回退。基本上，您有一个包装器来定位您的帖子项目，这将是直接在该包装器中的唯一子项（或者，至少是特定“标签”类型的唯一子项，这里是 a div）。所以像下面这样，只有孩子的数量可以是 2、3、4 或 6（根据您的要求）。

简单的 HTML（这不一定是div元素；只是说明）

<div class="postWrapper">
  <div>This is a post</div>
  <div>This is the second post</div>
</div>

设置默认 CSS2

对于 IE7/8，无论在这两个浏览器中显示多少帖子，这将是默认显示，使用此选择器：

.postWrapper > div { ... }

设置花式 CSS3

这是根据帖子的数量完成的，并将显示在所有 CSS3 浏览器中。它按以下顺序使用这一系列选择器：（我们在这里使用级联来发挥我们的优势）：

.postWrapper > div:nth-last-of-type(2),
.postWrapper > div:nth-last-of-type(2) ~ div {
   ... your two display css ...
}

.postWrapper > div:nth-last-of-type(3),
.postWrapper > div:nth-last-of-type(3) ~ div {
   ... your three display css ...
}

.postWrapper > div:nth-last-of-type(4),
.postWrapper > div:nth-last-of-type(4) ~ div {
   ... your four display css ...
}

.postWrapper > div:nth-last-of-type(6),
.postWrapper > div:nth-last-of-type(6) ~ div {
   ... your six display css ...
}

这样做是利用:nth-last-of-type()选择器通过包装器的子 div 的数量“倒数”，对其应用样式div，然后使用通用兄弟组合~器来设置所有其他 div 的样式.postWrapper（理论上）首先div. 它使用 对前两个执行此操作:nth-last-of-type(2)，但是如果包装器包含三个，则使用的下一组选择器将:nth-last-of-type(3)覆盖前一个(2)选择器，依此类推。这样，通过级联中的一系列覆盖css，我们更改了post元素数量的设置。

您可以在此小提琴中看到此技术的示例，用于说明目的。

注意：因为我们使用级联来覆盖，所以您必须确保处理任何先前设置的 css。在我的小提琴示例中，请注意我如何将 amargin放在四人组上，但后来我将它移到了六人组上。如果我margin在第 6 组中没有提到任何内容（即没有覆盖），那么第 6 组的元素 3-6（但不是 1-2）仍然会根据之前的 4 组设置应用边距.

于 2013-01-16T02:33:51.297 回答