某些卡片布局时有时为了让元素不超出外框,管制最初一列,最初一行
如图:
.operate-wrap {
font-size: 0;
width: 140px;
border: 2px #444 solid;
.item {
font-size: 12px;
width: 30px;
display: inline-block;
padding: 0;
margin: 0 10px 5px 0;
border: 5px #97ae6a solid;
&:nth-child(3n) {
border: 5px blue solid;
margin-right: 0;
background-color: #ff0000;
}
&:nth-last-child(-n+3) {
margin-bottom: 0;
background-color: #fff000;
}
<div class="operate-wrap">
<div class="item">1</div>
<div class="item">1</div>
<div class="item">1</div>
<div class="item">1</div>
<div class="item">1</div>
<div class="item">1</div>
<div class="item">1</div>
<div class="item">1</div>
<div class="item">1</div>
<div class="item">1</div>
<div class="item">1</div>
<div class="item">1</div>
</div>