Question

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

我的问题是我有4行，每行有2个不同的颜色框，对于第一行，我尝试通过CSS进行管理，但是我无法颠倒第二行的顺序，请查看下面我想要的快照。

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

在第一行中，我使用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>

请给我一些建议，以解决该问题。

Answer 1

为什么不将每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>

Answer 2

如上面的回答所述，如果您能够包装divs，那可能是最好的解决方案。如果没有，并且只有两行，则可能会发生以下情况：

sed -i '' s/'assets\"\
   #'/'some new text'/ filename.txt

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

Answer 3

尝试使用此jquery代码：

Dog

如何在html中为div的循环赋予2种不同的背景色

3 个答案: