Question

我想做一个3列响应式网格布局，其中包含很多没有分组的浮动<div>，但是我失败了，而不是响应方，因为在我的第一次媒体查询之后它工作正常，但我无法弄清楚正常的桌面视图。可能是因为在桌面上（低至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 在我冥冥之后，我正在考虑使用Mason，但我不想使用js，那么有没有基于CSS的解决方案？

Answer 1

你和孩子的想法可能有效。尝试：

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

CSS 3列响应网格

1 个答案: