问题
I have a list of N cards, floated, with width:33.3333%. When the user clicks on a card, it rotate and expands.
However, I would like that every 3:rd card started from the 1:st had a certain margin, every 3:rd card started from the 2:nd another margin and every 3:rd started from the 3:rd yet another margin.
Is there a way to do this with CSS selectors, for example child selector?
Plunker demo
Example:
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body class="landing">
<section id="intro">
<div class="inner">
<h2>Title</h2>
<!-- Cards -->
<div class="cards">
<div class="riga">
<div class="r2">
<div class="r4">
<div class="card-container manual-flip">
<div onclick="rotateCard(this)" class="card">
<div class="front">
<div class="cover">
<img src="img/rotating_card_thumb2.png" />
</div>
<div class="user">
<img src="img/img1.png" class="img-circle" />
</div>
<div class="content">
<div class="main">
<h3 class="name">Text</h3>
<p class="profession">Text</p>
<a onclick="rotateCard(this).disable();" class="actions button rimmed" href="#">Text</a>
<a onclick="rotateCard(this).disable();" class="actions button rimmed" href="#">Text</a>
</div>
<div class="footer">
<button class="btn btn-simple">
Info
</button>
</div>
</div>
</div>
<div class="back">
<div class="header">
<h5 class="motto">Text</h5>
</div>
<div class="content">
<div class="main">
<h4 class="text-center">Info</h4>
</div>
</div>
<div class="footer">
<button class="btn btn-simple">
Back
</button>
</div>
</div>
</div>
</div>
</div>
<div class="r4">
<div class="card-container manual-flip">
<div onclick="rotateCard(this)" class="card">
<div class="front">
<div class="cover">
<img src="img/rotating_card_thumb.png" />
</div>
<div class="user">
<img src="img/img2.png" class="img-circle" />
</div>
<div class="content">
<div class="main">
<h3 class="name">Text</h3>
<p class="profession">Text</p>
<a onclick="rotateCard(this).disable();" class="actions button rimmed" href="#">Text</a>
<a onclick="rotateCard(this).disable();" class="actions button rimmed" href="#">Text</a>
</div>
<div class="footer">
<button class="btn btn-simple">
Info
</button>
</div>
</div>
</div>
<div class="back">
<div class="header">
<h5 class="motto">Text</h5>
</div>
<div class="content">
<div class="main">
<h4 class="text-center">Info</h4>
</div>
</div>
<div class="footer">
<button class="btn btn-simple">
Back
</button>
</div>
</div>
</div>
</div>
</div>
<div class="r4">
<div class="card-container manual-flip">
<div onclick="rotateCard(this)" class="card">
<div class="front">
<div class="cover">
<img src="img/rotating_card_thumb2.png" />
</div>
<div class="user">
<img src="img/img3.png" class="img-circle" />
</div>
<div class="content">
<div class="main">
<h3 class="name">Text</h3>
<p class="profession">Text</p>
<a onclick="rotateCard(this).disable();" class="actions button rimmed" href="#">Text</a>
<a onclick="rotateCard(this).disable();" class="actions button rimmed" href="#">Text</a>
</div>
<div class="footer">
<button class="btn btn-simple">
Info
</button>
</div>
</div>
</div>
<div class="back">
<div class="header">
<h5 class="motto">Text</h5>
</div>
<div class="content">
<div class="main">
<h4 class="text-center">Info</h4>
</div>
</div>
<div class="footer">
<button class="btn btn-simple">
Back
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end inner -->
</section>
</body>
</html>
回答1:
You can use CSS :nth-child()
span {
float: left;
color: white;
text-align: center;
margin-top: 5px;
width: calc(33% - 60px);
}
span:nth-child(3n+1) {
background-color: green;
margin-left: 20px;
}
span:nth-child(3n+2) {
background-color: red;
margin-left: 40px;
}
span:nth-child(3n+3) {
background-color: blue;
margin-left: 60px;
}<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>回答2:
Yes, you probably can.
Try this:
.yourclass:nth-child(3n+1){
//child 1, 4, 7....
margin-left:10px;
}
.yourclass:nth-child(3n+2){
//child 2,5,8....
margin-left:20px;
}
.yourclass:nth-child(3n+3){
//child 3,6,9....
margin-left:30px;
}
回答3:
Assuming you have the following HTML and CSS you will obtain what you want:
/* Global Setting for columns */
.col {
float: left;
text-align: center;
}
/* Different margin for columns. */
.col:nth-child(3n-2) {
background-color: red;
clear: left;
border: 1px solid #000;
margin: 0 7.5px;
width: calc(33.33333333% - 2px - 15px); /* size + border + margin */
}
.col:nth-child(3n-1) {
background-color: green;
border: 1px solid #000;
margin: 0 15px;
width: calc(33.33333333% - 2px - 30px); /* size + border + margin */
}
.col:nth-child(3n) {
background-color: blue;
border: 1px solid #000;
border-left: 0;
border-right: 0;
width: 33.33333333%; /* Only size */
}<div class="container">
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3<br>3</div>
<div class="col">1</div>
<div class="col">2<br>2</div>
<div class="col">3</div>
<div class="col">1<br>1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
</div>
</div>来源：https://stackoverflow.com/questions/35127930/select-the-first-three-elements-in-css-and-repeat