如何在html的循环中为div提供2种不同的背景颜色答案

【问题标题】：How to give 2 different background color for div's in loop in html如何在html的循环中为div提供2种不同的背景颜色
【发布时间】：2018-09-11 08:59:01
【问题描述】：

我的 html 中有 2 种背景颜色框，我的 php 中有 1 个循环框。

我的问题是我有 4 行，每行有 2 个不同的颜色框，对于第一行，我尝试从 css 管理它，但我无法反转第二行的顺序，请参阅下面我想要的快照。

对不起我的英语，但试着理解我在说什么？

4 boxes in 2 row

在第一行中，我从 css 深色和浅色背景颜色进行管理，但我无法在第二行中颠倒顺序，我的意思是在第二行中，第一个框颜色为浅色，而其他颜色则为深色，然后是浅色。

请告诉我如何通过 css 管理它。

这是我的css和html代码

.teamColumn {
  float: left;
  width: 25%;
  position: relative;
  height: 192px;
  background-color: #1a1e2a;
  margin-bottom: 2px;
}

.teamColumn:after {
  position: absolute;
  content: "";
  bottom: 0px;
  right: 0;
  width: 76px;
  height: 91px;
}

.teamColumn:nth-child(2n+2) {
  background-color: #212634;
}

<div class="teamColumn">&nbsp;</div>
<div class="teamColumn">&nbsp;</div>
<div class="teamColumn">&nbsp;</div>
<div class="teamColumn">&nbsp;</div>
<div class="teamColumn">&nbsp;</div>
<div class="teamColumn">&nbsp;</div>
<div class="teamColumn">&nbsp;</div>
<div class="teamColumn">&nbsp;</div>

请给我建议如何解决这个问题。

【问题讨论】：

标签： html css

【解决方案1】：

正如上面的答案所述，如果您能够包装 div，那可能是最好的解决方案。如果没有并且您只有两行，则可能会这样：

.teamColumn{
float:left; 
width:25%; 
position:relative; 
height:192px; 
background-color:#1a1e2a;
margin-bottom:2px;
}
.teamColumn:after{
	position:absolute;
	content:"";
	bottom:0px;
	right:0;
	width:76px;
	height:91px;
}
.teamColumn:nth-child(8n+7){background-color:#212634;}
.teamColumn:nth-child(8n+5){background-color:#212634;}
.teamColumn:nth-child(8n+2){background-color:#212634;}
.teamColumn:nth-child(8n+4){background-color:#212634;}

<div class="teamColumn">&nbsp;</div>
<div class="teamColumn">&nbsp;</div>
<div class="teamColumn">&nbsp;</div>
<div class="teamColumn">&nbsp;</div>
<div class="teamColumn">&nbsp;</div>
<div class="teamColumn">&nbsp;</div>
<div class="teamColumn">&nbsp;</div>
<div class="teamColumn">&nbsp;</div>
<div class="teamColumn">&nbsp;</div>
<div class="teamColumn">&nbsp;</div>
<div class="teamColumn">&nbsp;</div>
<div class="teamColumn">&nbsp;</div>
<div class="teamColumn">&nbsp;</div>
<div class="teamColumn">&nbsp;</div>
<div class="teamColumn">&nbsp;</div>
<div class="teamColumn">&nbsp;</div>

【讨论】：

感谢@Erik Svedin，这很好，但另一个问题是 3 行前 2 个框的背景颜色相同
@AnmolRatanMohla 现在更新了几行的答案！

【解决方案2】：

为什么不将每个 4 个 div 包装起来？我认为这个问题很容易解决。

<div class="row">
    <div class="teamColumn">&nbsp;</div>
    <div class="teamColumn">&nbsp;</div>
    <div class="teamColumn">&nbsp;</div>
    <div class="teamColumn">&nbsp;</div>
</div>
<div class="row">
    <div class="teamColumn">&nbsp;</div>
    <div class="teamColumn">&nbsp;</div>
    <div class="teamColumn">&nbsp;</div>
    <div class="teamColumn">&nbsp;</div>
</div>

【讨论】：

抱歉，teamColumn div 循环在 1 行 -
我不是从我在 1 行最多 20-24 个盒子中的单独行中管理它

【解决方案3】：

试试这个 jquery 代码：

    var items = ["#9062aa","#3fb4e9"];

 $(".CLASSNAME").each(function(index) {

   var color = items[index % items.length];
   $(this).css('background', color);

  });

【讨论】：