CSS - 设置第 n 个孩子的左侧位置答案

【问题标题】：CSS - set left position of nth childCSS - 设置第 n 个孩子的左侧位置
【发布时间】：2013-07-03 16:52:05
【问题描述】：

我想将第 n 个 div 的左侧位置设置为 (n-1)*250px，例如：

1st child: left = 0px
2nd child: left = 250px
...

是否可以在 css 中这样做？我正在使用 Javascript 来设置它。谢谢。

【问题讨论】：

标签： css

【解决方案1】：

想到了 CSS3 calc() 方法，但它不支持使用索引 (n) 作为操作数，因此不起作用。

推荐的解决方案：您可以设计布局，使每个元素的宽度为250px。给每个元素display: inline-block 或float: left，它们会按照你的意图排列。如果元素内容的宽度需要大于250px，请确保在元素上设置overflow: visible（默认值）并允许内容溢出。如果没有更多信息，这应该可以达到您想要的效果。

但是，如果您需要使用更直接的定位方法，您应该坚持使用 JavaScript 来设置这些元素的位置。您可能需要考虑屏幕宽度、元素宽度等，而 CSS 会让您无法做到这一点。

查看this JSFiddle 以获得灵感。如果您发布您想要实现的目标的草图，我可以进一步帮助您。

【讨论】：

+1 表示唯一一个似乎已经阅读了问题并真正理解它的人；）

【解决方案2】：

你可以使用：

div:nth-of-type(an+b)
// or
div:nth-child(an+b)

解决您的 div 问题。

div{
  position:absolute;
} 
div:nth-child(2){
  left: 250px;
} 
div:nth-child(3){
  left: 500px;
}

如果没有预处理器，您需要手动编写每个规则，因为在设置 left 属性时不可能使用动态方式。

另一种可能性（取决于您真正想要做什么）是引入嵌套并设置padding-left:250px。但这只有在您可以相应地更改您的标记时才有效。

Javascript 可能是这里最简单的方法。

【讨论】：