CSS 3列响应网格

Question

我想做一个3列响应网格布局，有大量浮动<div> s没有分组，但我失败了，而不是响应方，因为在我的第一个媒体查询后工作正常，但我无法弄清楚正常的桌面视图。可能是因为在桌面上（低至990px​​），布局应该如下图所示：第一列（左对齐）没有左边距或填充，而不是第二列（对齐中心）的间距为20px，再次为20px间距，第三列（对齐右）没有右边距或填充。

的HTML如下：

<div class="container"> 
    <div class="item">...</div> 
    <div class="item">...</div> 
    <div class="item">...</div> 
    <div class="item">...</div> 
    <div class="item">...</div> 
    <div class="item">...</div> 
    <div class="item">...</div> 
    <div class="item">...</div> 
    <div class="item">...</div> 
    <div class="item">...</div> 
    <div class="item">...</div> 
</div> 

的CSS：

* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} 

.container { 
    max-width: 904px; 
    margin: 0 auto; 
    overflow: hidden; 
} 

.item { 
    width: 288px; 
    float: left; 
} 

@media screen and (max-width: 960px) { 
    .container { 
    width:98%; 
    } 

    .item { 
    width: 50%; 
    padding: 1% 4%; 
    margin: 0; 
    } 
} 
@media screen and (max-width: 600px) { 
    .item { 
    width: auto; 
    padding 1% 4%; 
    margin: 0; 
    } 
} 

我想用nth-child()的，但不能找出一个正确的顺序，因为让说，我想一个20像素的保证金在中间的每一个元素，那么它会是这样的：2,5,8,11,14，..，n 经过一个诡计后，我正在考虑砌体js，但我不想用js，所以有没有任何基于CSS的解决方案？

Answer 1

你是第n个孩子的想法可能工作。尝试：

.item:nth-child(3n+2) 
{ 
    background-color:#f00; 
}