使用div

时间：2015-11-07 17:25:19

标签： html css twitter-bootstrap css-selectors

我怎样才能让奇数行上的艺术家与其他行上的艺术家一样？以下是我所拥有的截图。

这是代码。我还为每位艺术家使用了bootstrap和div。

＆＃13;
＆＃13; 
.col-md-4 {
  width: 33.3333%;
  float: left;
  position: relative;
  min-height: 1px;
}

.img-wrapper {
    width: 100px;
    height: 100px;
    overflow: hidden;
    border-radius: 100%;
    float: left;
    margin: 5px;
}

.img-container {
    height: 100px;
}

.artist:nth-child(6n), 
.artist:nth-child(5n), 
.artist:nth-child(4n) {
     background-color: #cecece;
}
＆＃13; 
<div class="col-md-4 artist">
	<div class="img-wrapper">
		<img style="height: 100px" src="https://i.scdn.co/image/8d52d583a342e3d84f6525cc429111e58dc0ff06">
	</div>
	<p><b>P!nk</b></p>

	<p><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span><span
			class="fa fa-star"></span></p>

	<p>Volgers op Spotify: 1476821</p>
</div>
  
<div class="col-md-4 artist">
	<div class="img-wrapper">
		<img style="width:100px" src="https://i.scdn.co/image/c8e2d354c5802ff0c21298b40b3f6fb3d4fd9672">
	</div>
	<p><b>Admiral P</b></p>

	<p><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span></p>

	<p>Volgers op Spotify: 69782</p>
</div>

<div class="col-md-4 artist">
	<div class="img-wrapper">
		<img style="width:100px" src="https://i.scdn.co/image/4500c5e5d54d80db803a6ddb0dbc81bacc4e773b">
	</div>
	<p><b>P-Square</b></p>

	<p><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span></p>

	<p>Volgers op Spotify: 58269</p>
</div>

<div class="col-md-4 artist">
	<div class="img-wrapper">
		<img style="height: 100px" src="https://i.scdn.co/image/4443c21199484eed69f01996585ba4ecc118fb01">
	</div>
	<p><b>Diddy</b></p>

	<p><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span><span
			class="fa fa-star"></span></p>

	<p>Volgers op Spotify: 89556</p>
</div>

<div class="col-md-4 artist">
	<div class="img-wrapper"><img style="width:100px"
								  src="https://i.scdn.co/image/e784e3cc748a73c0e12919c591646cd6f94bfa46"></div>
	<p><b>P. Moody</b></p>

	<p><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span></p>

	<p>Volgers op Spotify: 17</p></div>
<div class="col-md-4 artist">
	<div class="img-wrapper"><img style="height: 100px"
								  src="https://i.scdn.co/image/666343468e2fa18535695920fec4ce1322ba8fc0"></div>
	<p><b>Kal P. Dal</b></p>

	<p><span class="fa fa-star"></span><span class="fa fa-star"></span></p>

	<p>Volgers op Spotify: 5670</p></div>
<div class="clearfix col-md-4 artist">
	<div class="img-wrapper"><img style="width:100px"
								  src="https://i.scdn.co/image/840e70467d88117395010903cbdbd644870f62fb"></div>
	<p><b>P Money</b></p>

	<p><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span></p>

	<p>Volgers op Spotify: 1544</p></div>
<div class="col-md-4 artist">
	<div class="img-wrapper"><img style="width:100px"
								  src="https://i.scdn.co/image/91dcd8ec5519f676096d5acf04e23771385f2c7d"></div>
	<p><b>Styles P</b></p>

	<p><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span><span
			class="fa fa-star"></span></p>

	<p>Volgers op Spotify: 25757</p></div>
<div class="col-md-4 artist">
	<div class="img-wrapper"><img style="width:100px"
								  src="https://i.scdn.co/image/8d8c1dee3b2d7ba5f3646d59efd06c741fb84900"></div>
	<p><b>P Reign</b></p>

	<p><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span><span
			class="fa fa-star"></span></p>

	<p>Volgers op Spotify: 18154</p></div>
<div class="col-md-4 artist">
	<div class="img-wrapper"><img style="width:100px"
								  src="https://i.scdn.co/image/d7aed46ab444dd22498e326c0575651575599259"></div>
	<p><b>Doctor P</b></p>

	<p><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span></p>

	<p>Volgers op Spotify: 81745</p></div>
<div class="col-md-4 artist">
	<div class="img-wrapper"><img style="width:100px"
								  src="https://i.scdn.co/image/d67d56922d6acb4138e773519e4a2a4ce41e2b88"></div>
	<p><b>Jaye P. Morgan</b></p>

	<p><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span></p>

	<p>Volgers op Spotify: 105</p></div>
<div class="col-md-4 artist">
	<div class="img-wrapper"><img style="width:100px"
								  src="https://i.scdn.co/image/6f8395caa983b78753ec3dd9cbcdae9e7a4be6c1"></div>
	<p><b>Jesse P</b></p>

	<p><span class="fa fa-star"></span><span class="fa fa-star"></span></p>

	<p>Volgers op Spotify: 186</p></div>
<div class="col-md-4 artist">
	<div class="img-wrapper"><img style="width:100px"
								  src="https://i.scdn.co/image/661757d1cb52ad7abc263ef6c2ef64fc864a8e1f"></div>
	<p><b>Professor P &amp; DJ Akilles</b></p>

	<p><span class="fa fa-star"></span><span class="fa fa-star"></span></p>

	<p>Volgers op Spotify: 1689</p></div>
<div class="col-md-4 artist">
	<div class="img-wrapper"><img style="height: 100px" src="assets/images/ongekend persoon.png"></div>
	<p><b>P-Bros</b></p>

	<p><span class="fa fa-star"></span><span class="fa fa-star"></span></p>

	<p>Volgers op Spotify: 588</p></div>
<div class="col-md-4 artist">
	<div class="img-wrapper"><img style="height: 100px"
								  src="https://i.scdn.co/image/3f31c5dddae63b3d5698f12c05564a45ebdc8240"></div>
	<p><b>P-Danjelsa</b></p>

	<p><span class="fa fa-star"></span><span class="fa fa-star"></span></p>

	<p>Volgers op Spotify: 721</p></div>
<div class="col-md-4 artist">
	<div class="img-wrapper"><img style="height: 100px" src="assets/images/ongekend persoon.png"></div>
	<p><b>Onkl P</b></p>

	<p><span class="fa fa-star"></span><span class="fa fa-star"></span></p>

	<p>Volgers op Spotify: 1032</p></div>
<div class="col-md-4 artist">
	<div class="img-wrapper"><img style="width:100px"
								  src="https://i.scdn.co/image/a423666132155db0b99d359696dea1be70a99eb0"></div>
	<p><b>Professor P</b></p>

	<p><span class="fa fa-star"></span><span class="fa fa-star"></span></p>

	<p>Volgers op Spotify: 249</p></div>
<div class="col-md-4 artist">
	<div class="img-wrapper"><img style="height: 100px"
								  src="https://i.scdn.co/image/0f70ba42f2b62b176e369616b185274887821d80"></div>
	<p><b>Ska-P</b></p>

	<p><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span><span
			class="fa fa-star"></span></p>

	<p>Volgers op Spotify: 170185</p></div>
<div class="col-md-4 artist">
	<div class="img-wrapper"><img style="width:100px"
								  src="https://i.scdn.co/image/cdfd50fd6384ad50660a1b29e1a05bc89b941f61"></div>
	<p><b>David P.</b></p>

	<p><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span></p>

	<p>Volgers op Spotify: 257</p></div>
<div class="col-md-4 artist">
	<div class="img-wrapper"><img style="height: 100px"
								  src="https://i.scdn.co/image/5728b492898e97b8a82fcf8de2374c0190387354"></div>
	<p><b>Crazy P</b></p>

	<p><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span></p>

	<p>Volgers op Spotify: 12852</p></div>
＆＃13;
＆＃13;
＆＃13;

在全屏幕上切换片段以查看最佳结果

有谁能说我能做什么？

1 个答案:

答案 0 :(得分：1)

从每第六个元素开始，每第四个，第五个和第六个元素：

.artist:nth-child(6n+4), 
.artist:nth-child(6n+5), 
.artist:nth-child(6n+6) {
     background-color: #cecece;
}

https://jsfiddle.net/arw0udvd/1/

相关问题
最新问题