使用第 n 个类型设置一组八个元素的样式

style a group of eight elements with nth-of-type?

本文关键字：样式 一组 八个 元素 类型 设置      更新时间：2023-09-26

我想设置一组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);
    }

如果你正在尝试制作一个网格，你可以创建一个固定宽度的外部div，然后每个瓷砖可以有一个固定的宽度，大约是外部div宽度的1/7，并具有float：left样式。

如果你的数学做对了，那么每个第 8 个div 应该自动中断到下一行。

阅读浮动div（和清除浮动！在这里 https://css-tricks.com/all-about-floats/全餐优惠

怎么样，没有脚本，只有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; 
}

这应该可以解决您的问题：

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

演示

相关文章：