html - CSS 3 列响应式网格

Question

我想做一个有很多 float 的 3 列响应式网格布局 <div> s 没有分组，但我失败了，而不是响应方面，因为在我第一次媒体查询后它工作正常但我无法弄清楚正常的桌面 View 。可能是因为在桌面上(低至 990px​​)布局应该是这样的:第一个 col(左对齐)没有左边距或填充比 20px 间隙比第二个 col(居中对齐)再次 20px 间隙和第三个 col(对齐右)没有右边距或填充。

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()但无法找出正确的顺序，因为假设我想在中间的每个元素上留出 20px 的边距，那么它将是这样的:2,5,8,11,14,..,n一段时间后，我正在考虑使用 Masonry js，但我不想使用 js，那么有没有基于 css 的解决方案呢？

Answer 1

你是第 n 个 child 的想法可能会奏效。尝试:

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