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，然后其中的每个tile可以具有固定宽度，该宽度约为外部div的宽度的1/7并且具有float：left样式。

如果你的数学运算正确，那么每第8个div应该自动进入下一行。

阅读浮动div（以及清除花车！）这里https://css-tricks.com/all-about-floats/全餐交易

Answer 2

这个怎么样，没有脚本，只有CSS。

＆＃13;

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

＆＃13;

<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>

＆＃13;

使用此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');
});

的 DEMO

使用nth-type来设置一组八个元素？

3 个答案: