CSS - 集n個子

Question

的左側位置我想第n個div的左postition設置爲（N-1）* 250像素，對於如：

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

是否有可能在CSS這樣做？我正在使用Javascript來設置它。謝謝。

Answer 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; 
} 

沒有預處理器，你需要手工編寫每一個規則，因爲有一個動態的方式不可能設置左屬性時。

另一種可能性（取決於你真正想做什麼）將會引入嵌套並設置padding-left:250px。但是，只有當你可以相應地改變你的標記時纔有效。

JavaScript可能是最簡單的方法。

Answer 2

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

建議的解決方案：您可以設計您的佈局，使每個元素的寬度爲250px。給予每個元素display: inline-block或float: left，他們會按照你的意願排隊。如果元素內容的寬度需要大於250px，請確保在元素上設置了overflow: visible（默認值），並允許內容溢出。沒有更多的信息，這應該達到你想要的效果。

但是，如果您需要使用更直接的定位方法，則應該使用JavaScript來設置這些元素的位置。可能的話，你會想要考慮屏幕寬度，元素寬度等等，而CSS會讓你無法做到這一點。

看看this JSFiddle的靈感。如果您張貼您想要達到的內容的草圖，我可以進一步幫助您。