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

Question

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

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

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

Answer 1

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

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

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

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

Answer 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 属性时不可能采用动态方式。

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

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