Question

所以我想创建一个网格，其中子项是单独的网格方块。

然而，我和孩子之间的间距是我不想要的。如何删除它？

父母的负边距移动整个事物，使其在页面上偏心。

目标是使整个事物具有响应性，这就是我使用浮动和相对宽度的原因。

我希望它看起来像这样（10px间距）：

+-----+--+-----+--+-----+--+-----+
|xxxxx|  |xxxxx|  |xxxxx|  |xxxxx|
|xxxxx|  |xxxxx|  |xxxxx|  |xxxxx|
|xxxxx|  |xxxxx|  |xxxxx|  |xxxxx|
+-----+  +-----+  +-----+  +-----+
|                                |
+-----+  +-----+                 |
|xxxxx|  |xxxxx|                 |
|xxxxx|  |xxxxx|                 |
|xxxxx|  |xxxxx|                 |
+--------------------------------+

＆＃13;

#parent {
  width: 500px;
  height: 500px;
  background-color: #CCCCCC;
}

.child {
  box-sizing: border-box;
  /* So the padding expands inwards */
  padding: 5px;
  /* Replacement to margin so relative width works, spacing between children ends out to be 10px of course */
  width: 25%;
  height: 100px;
  float: left;
}

.child>div {
  /* This represents content of the child */
  width: 100%;
  height: 100%;
  background-color: #000000;
}

＆＃13;

<div id=parent>
  <div class=child>
    <div></div>
  </div>
  <div class=child>
    <div></div>
  </div>
  <div class=child>
    <div></div>
  </div>
  <div class=child>
    <div></div>
  </div>
  <div class=child>
    <div></div>
  </div>
  <div class=child>
    <div></div>
  </div>
</div>

＆＃13;

Answer 1

这样的事情：

.child { padding: 0 5px 5px 0;}
.child:nth-child(4n){ padding-right: 0;}

参见下面的工作演示：

＆＃13;

#parent {
  width: 500px;
  height: 500px;
  background-color: #CCCCCC;
}

.child {
  box-sizing: border-box;
  width: 25%;
  height: 100px;
  float: left;
  padding: 0 5px 5px 0;
}

.child:nth-child(4n) {
  padding-right: 0;
}

.child>div {
  /* This represents content of the child */
  width: 100%;
  height: 100%;
  background-color: #000000;
}

＆＃13;

<div id=parent>
    <div class=child><div></div></div>
    <div class=child><div></div></div>
    <div class=child><div></div></div>
    <div class=child><div></div></div>
    <div class=child><div></div></div>
    <div class=child><div></div></div>
    <div class=child><div></div></div>
    <div class=child><div></div></div>
    <div class=child><div></div></div>
    <div class=child><div></div></div>
</div>

＆＃13;

Answer 2

这个怎么样：

＆＃13;

    <div id=parent>
        <div class=child><div></div></div>
        <div class=child><div></div></div>
        <div class=child><div></div></div>
        <div class=child><div></div></div>
        <div class=child><div></div></div>
        <div class=child><div></div></div>
    </div>

    <style>
      #parent {
        width: 500px;
        height: 200px;
        background-color: #CCCCCC;
      }

      .child {
        box-sizing: border-box; /* So the padding expands inwards */
        width: 25%;
        height: 100px;
        float: left;
        padding:0px 5px 5px 0px;
      }
      .child:nth-child(4n) {
   
  padding-right: 0;
}
.child:nth-child(n+5) {
  padding:5px 5px 0px 0px;
}
      .child > div { /* This represents content of the child */
        width: 100%;
        height: 100%;
        background-color: #000000;
      }
    </style>

＆＃13;

Answer 3

这是CSS Grid Layout已解决的问题。

网格提供grid-column-gap，grid-row-gap和grid-gap（简写），它在网格项之间创建空间，但不适用于项目和容器之间的区域。

10.1. Gutters: the grid-column-gap, grid-row-gap, and grid-gap properties

这些属性指定网格行和网格之间的装订线   列，分别。

＆＃13;

#parent {
  display: grid;
  grid-template-columns: repeat(auto-fill, 120px);
  grid-auto-rows: 120px;
  grid-gap: 10px;
  width: 510px;
  background-color: #cccccc;
}

.child {
  background-color: #000000;
}

＆＃13;

<div id="parent">
  <div class=child></div>
  <div class=child></div>
  <div class=child></div>
  <div class=child></div>
  <div class=child></div>
  <div class=child></div>
</div>

＆＃13;

有关上述其他网格属性如何工作的说明，请参阅此帖子：CSS-only masonry layout but with elements ordered horizontally

有关CSS网格浏览器支持，请参阅此处：http://caniuse.com/#search=grid

在物品之间有间距/沟槽的网格，但不在物品和容器之间

3 个答案:

这样的事情：

参见下面的工作演示：