Question

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

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

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

Answer 1

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

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

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

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

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

Javascript可能是最简单的方法。

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

2 个答案: