兄弟div的替代背景颜色

Question

我正在为我正在创建的这个系统遇到一个问题。我总共有四个兄弟div容器。它们在普通桌面视图中如下所示：

蓝红蓝红

这适用于2/3视口，以显示background-color作为替代颜色。它适用于普通桌面模式和640px及以下屏幕，但对于我的中间视口640-840px，屏幕显示的颜色如下：

蓝红色

蓝红色

这将使阅读变得非常困难。基本上我需要divs＆＃39;颜色要改变成这样的模式：

蓝红色

红蓝

我有办法实现这个目标吗？

＆＃13;

＆＃13;

body {
	margin: 0;
}
.box-container {
	position: absolute;
	width: 100%;
	margin: 0;
	padding: 0;
	height: 100%;
}
.blue-box, .red-box {
	height: 50%;
	width: 25%;
	display: inline-block;
	vertical-align: top;
	padding: 0;
	margin: 0;
	transition: all .5s ease-in-out;
}
.blue-box {
	background-color: blue;
}
.red-box {
	background-color: red;
}
.blue-box:hover, .red-box:hover {
	background-color: purple;
	cursor: pointer;
}
.blue-box:hover .box-description, .red-box:hover .box-description {
	display: none;
}
.blue-box:hover .box-description-hover, .red-box:hover .box-description-hover {
	display: block;
	color: #FFF;
	font-size: 1.5em;
	padding-top: 20px;
}
.insideBoxWrap {
	padding: 50px 18%;
}
.box-title {
	color: #FFF;
	font-size: 2.6em;
}
.box-description {
	padding-top: 15px;
	color: green;
	font-size: 1.5em;
}
.box-description-hover {
	display: none;
}
/*----------------------------------------------PHONE MEDIA QUERY 640--------------------------*/

@media screen and (max-width:640px) {
	.box-container {
		width: 100%;
		height: 50%;
	}
	.blue-box, .red-box {
		height: 50%;
		width: 100%;
		display: block;
	}
	.blue-box:hover, .red-box:hover {
		height: 100%;
	}
	.blue-box:hover .box-description-hover, .red-box:hover .box-description-hover {
		display: block;
		color: #FFF;
		font-size: 1.1em;
		padding-top: 20px;
	}
	.insideBoxWrap {
		padding: 30px 30px;
	}
	.box-title {
		font-size: 1.6em;
	}
	.box-description {
		padding-top: 5px;
		color: green;
		font-size: 1.1em;
	}
}	
/*----------------------------------------------PHONE MEDIA QUERY 641 - 840--------------------------*/

@media screen and (min-width: 640px) and (max-width:840px) {
	.box-container {
		width: 100%;
		height: 100%;
	}
	.blue-box, .red-box {
		height: 33%;
		width: 50%;
		display: inline-block;
	}
}

＆＃13;

<div class="box-container">
  <div class="blue-box">
    <div class="insideBoxWrap">
      <div class="box-title">Box 1</div>
      <div class="box-description">Normal View</div>
      <div class="box-description-hover">Hover View</div>
    </div>
  </div><div class="red-box">
    <div class="insideBoxWrap">
      <div class="box-title">Box 2</div>
      <div class="box-description">Normal View</div>
      <div class="box-description-hover">Hover View</div>
    </div>
  </div><div class="blue-box">
    <div class="insideBoxWrap">
      <div class="box-title">Box 3</div>
      <div class="box-description">Normal View</div>
      <div class="box-description-hover">Hover View</div>
    </div>
  </div><div class="red-box">
    <div class="insideBoxWrap">
      <div class="box-title">Box 4</div>
      <div class="box-description">Normal View</div>
      <div class="box-description-hover">Hover View</div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

添加：

<强> CodePen

.blue-box:nth-child(3){
    background-color:red;
 }
.red-box:nth-child(4){
   background-color:blue;
}

到@media screen and (min-width: 640px) and (max-width:840px)

Answer 2

试试这个;

/*----------------------------------------------PHONE MEDIA QUERY 641 - 840--------------------------*/

@media screen and (min-width: 640px) and (max-width:840px) {
    .box-container {
        width: 100%;
        height: 100%;
    }
    .blue-box, .red-box {
        height: 33%;
        width: 50%;
        display: inline-block;
    }
    .group:nth-child(even) .blue-box {
        background-color: red;
    }
    .group:nth-child(even) .red-box {
        background-color: blue;
    }
}

和CSS一样

# Suppose the 2D array is pop_density
coarseness = 5
temp = pop_density.reshape((pop_density.shape[0] // coarseness, coarseness,
                            pop_density[1] // coarseness, coarseness))
coarse_pop_density = np.sum(temp, axis=(1,3))

希望这有帮助。