3

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

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

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

4

2 回答 2

5

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

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

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

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

于 2013-07-03T08:41:36.073 回答
1

您可以使用:

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 可能是这里最简单的方法。

于 2013-07-03T08:38:00.540 回答