0

我知道这对于纯 CSS 可能是不可能的，但是......我怎样才能从一组元素中只选择第 n 行 -当这些元素位于灵活宽度的容器中并且元素本身是时inline-block；

例子：

  • 一个包含 10 个元素的容器，每个 50px 宽，容器宽 200px - 选择器将抓取元素 1 到 4（从元素 5 开始被包裹在下一行）

  • 一个包含 10 个元素的容器，每个 50px 宽，容器宽 250px - 选择器将抓取元素 1 到 5（元素 6 之后的元素被包裹在下一行）

注意：请参阅此小提琴以供参考： http: //jsfiddle.net/y7qCJ/ - 但显然 nth-child 不能这样工作，因此我的问题就在这里。

4

2 回答 2

0

简短的回答 - 不能用 CSS 完成

于 2013-02-11T12:41:50.700 回答
0

第 n 个孩子不是跨浏览器，因此您将返回手动选择：

.container > li:first-child,
.container > li:first-child+li,
.container > li:first-child+li+li,
.container > li:first-child+li+li+li,
.container > li:first-child+li+li+li+li
{
   border:1px solid red; 
}

这显然将针对前 5 个。如果您的 html 是服务器生成的，那么您也可以在头部添加一些内联服务器端生成的 css 以添加此规则（因为它是可更改的）但如果您的 html 永远不会改变，那么您可以像往常一样将其添加到 .css .

看小提琴

更新：

由于您似乎希望目标 LI 的数量取决于 FLUID 布局中浏览器的宽度，因此您必须执行一个 javascript 解决方案，其伪代码为：

on load/resize

  lielements[] = .container > li
  width = get .container width
  licount = abs(width/50)

  for(int i = 1; i < licount; ++i)
  {
     lielements[i].css = apply css class with width:50px to element
  }
于 2013-01-13T11:30:46.367 回答