用nth-of-type設置一組八個元素的樣式？

Question

我想設置一組div的樣式，以便每八個元素都具有相同的左定位。 因此，不是每一個要素，而是一組八個要素。 我已經嘗試過使用css / jquery進行此操作，但是它僅對每個第八個元素設置樣式，這是錯誤的。

var cells = $('.board-cells'),
        cellUnit = 70,
        startPos = -35;

    var left;
    for(j=0; j<8; j++){
      left = startPos+(cellUnit*j+1) + 'px';
    }
    for(i=0; i<cells.length; i+=8){
      var cellItem = $('.board-cells:nth-of-type('+i+'n+0)');
      cellItem.css('left', left);
    }

Answer 1

如果您要制作網格，則可以創建一個具有固定寬度的外部div，然后其中的每個圖塊都可以具有大約為外部div寬度的1/7的固定寬度，並具有float：左樣式。

如果您正確進行數學運算，則每8格應自動跳至下一行。

在浮動div上閱讀（並清除浮動）！在這里https://css-tricks.com/all-about-floats/了解全膳

Answer 2

怎么樣，沒有腳本，只有CSS。

 html, body { margin: 0; } .container { display: flex; flex-wrap: wrap; } .container .img { height: 70px; width: calc(100% / 8); background: red; border: 2px solid white; box-sizing: border-box; } .container .img:nth-of-type(8n+1):after { content: '1'; } .container .img:nth-of-type(8n+2):after { content: '2'; } .container .img:nth-of-type(8n+3):after { content: '3'; } .container .img:nth-of-type(8n+4):after { content: '4'; } .container .img:nth-of-type(8n+5):after { content: '5'; } .container .img:nth-of-type(8n+6):after { content: '6'; } .container .img:nth-of-type(8n+7):after { content: '7'; } .container .img:nth-of-type(8n+8):after { content: '8'; } 

 <div class="container"> <div class="img"></div><div class="img"></div> <div class="img"></div><div class="img"></div> <div class="img"></div><div class="img"></div> <div class="img"></div><div class="img"></div> <div class="img"></div><div class="img"></div> <div class="img"></div><div class="img"></div> <div class="img"></div><div class="img"></div> <div class="img"></div><div class="img"></div> </div> 

---

使用此CSS，您可以將每個組定位為左值

.container .img:nth-of-type(8n+1) {
  left: -34px;
}
.container .img:nth-of-type(8n+2) {
  left: 36px;
}
.container .img:nth-of-type(8n+3) {
  left: 106px;
}
.container .img:nth-of-type(8n+4) {
  left: 176px;
}
.container .img:nth-of-type(8n+5) {
  left: 246px;
}
.container .img:nth-of-type(8n+6) {
  left: 316px;
}
.container .img:nth-of-type(8n+7) {
  left: 386px;
}
.container .img:nth-of-type(8n+8) {
  left: 456px; 
}

Answer 3

這應該可以解決您的問題：

var cellUnit = 70;
var startPos = -35;

$('.board-cells').each(function (i, el) {
    $(el).css('left', startPos + cellUnit * (i % 8) + 1 + 'px');
});

演示