Question

我列出了一些元素，应该是这样的：

1：背景可能不同。元素可以有自己的样式（如边框等）（元素在图像/小提琴上被简化，所有不重要的东西都被省略了。）
2：所有灰色的东西都应该响应，所以我使用：

div.grey {
    float: left;
    width: 12.5%;
    height: 50px;
}

3：所有边距（黑色）应为3px，因此：

.grey {
    margin-left: 3px;
}

.grey:nth-child(8n+1) {
    margin-left: 0;
}

.grey:nth-child(n+9) {
    margin-top: 3px;
}

我得到了：

边距不包括在百分比宽度中，因此行数已损坏。

如何解决？

JSFiddle

Answer 1

如果我正确理解了您的问题，您希望这些方框的宽度为12.5％，以便在一行中填充8个方框，并在它们周围加上固定的3px边距。如果我们可以将边距包含在盒子大小中，那么它将非常直接，因为盒子将包含12.5％的所有内容，而不是我们可以使用边框来获得相同的结果，但是因为您已经警告过应该从边距可见背景，这是使用填充，框大小和嵌套div的另一种方法。

＆＃13;

.grey {
  float: left;
  width: 12.5%;
  padding-left: 3px;   
  box-sizing: border-box;
}
.grey > div {
  background-color: grey;
  width: 100%;
  height: 50px;
}

.grey:nth-child(n+9) {
  margin-top: 3px;
}

.grey:nth-child(8n+1) {
  padding-left: 0;
}

/* Helper */
.wrapper {
  background-color: black;
}

.wrapper:before, .wrapper:after {
  content: " ";
  display: table;
}

.wrapper:after {
  clear: both;
}

＆＃13;

<div class="wrapper">
  <div class="grey"><div>1</div>
  </div>
  <div class="grey"><div>2</div>
  </div>
  <div class="grey"><div>3</div>
  </div>
  <div class="grey"><div>4</div>
  </div>
  <div class="grey"><div>5</div>
  </div>
  <div class="grey"><div>6</div>
  </div>
  <div class="grey"><div>7</div>
  </div>
  <div class="grey"><div>8</div>
  </div>
  <div class="grey"><div>9</div>
  </div>
  <div class="grey"><div>10</div>
  </div>
  <div class="grey"><div>11</div>
  </div>
  <div class="grey"><div>12</div>
  </div>
  <div class="grey"><div>13</div>
  </div>
  <div class="grey"><div>14</div>
  </div>
  <div class="grey"><div>15</div>
  </div>
  <div class="grey"><div>16</div>
  </div>
  <div class="grey"><div>17</div>
  </div>
</div>

＆＃13;

Answer 2

尝试使用calc + inner block with negative margin-left

HTML

<div class="wrapper">
    <div class="inner">
        <div class="grey">1
        </div>
        <div class="grey">2
        </div>
        <div class="grey">3
        </div>
        <div class="grey">4
        </div>
        <div class="grey">5
        </div>
        <div class="grey">6
        </div>
        <div class="grey">7
        </div>
        <div class="grey">8
        </div>
        <div class="grey">9
        </div>
        <div class="grey">10
        </div>
        <div class="grey">11
        </div>
        <div class="grey">12
        </div>
        <div class="grey">13
        </div>
        <div class="grey">14
        </div>
        <div class="grey">15
        </div>
        <div class="grey">16
        </div>
        <div class="grey">17
        </div>
    </div>
</div>

CSS

.grey {
        float: left;
        width: calc(12.5% - 3px);
        height: 50px;
        margin-left: 3px;
        background-color: grey;
    }

    .grey:nth-child(n+9) {
        margin-top: 3px;
    }

    /* Helper */
    .wrapper {
        background-color: black;
    }

    .wrapper .inner {
        margin-left: -3px;
    }

    .wrapper .inner:before, .wrapper .inner:after {
        content: " ";
        display: table;
    }

    .wrapper .inner:after {
        clear: both;
    }

以下是工作结果 - https://jsfiddle.net/itoriginal/721k1gkz/6/

Answer 3

使用box-sizing，您可以使用灰色元素周围的边框而不是边距，然后计算宽度，包括边框的宽度，并且浮动元素的宽度不会超过容器的那个：

.grey {
    float: left;
    width: 12.5%;
    height: 50px;
    background-color: grey;
    position: relative;
    box-sizing: border-box;
    border-left: 3px solid #000;
    border-top: 3px solid #000;
}
.grey:nth-child(-n+8) {
    border-top: 0; /* Remove top border from first 8 */
}
.grey:nth-child(8n+1) {
    border-left: 0; /* Remove left border from every 9th */
}
/* Helper */
 .wrapper {
    overflow: hidden;
    background-color: black;
}
.wrapper:before, .wrapper:after {
    content:" ";
    display: table;
}
.wrapper:after {
    clear: both;
}

<div class="wrapper">
    <div class="grey">1</div>
    <div class="grey">2</div>
    <div class="grey">3</div>
    <div class="grey">4</div>
    <div class="grey">5</div>
    <div class="grey">6</div>
    <div class="grey">7</div>
    <div class="grey">8</div>
    <div class="grey">9</div>
    <div class="grey">10</div>
    <div class="grey">11</div>
    <div class="grey">12</div>
    <div class="grey">13</div>
    <div class="grey">14</div>
    <div class="grey">15</div>
    <div class="grey">16</div>
    <div class="grey">17</div>
    <div class="grey">17</div>
    <div class="grey">17</div>
    <div class="grey">17</div>
</div>

注意：请box-sizing查看php: install: '1' <-- tells puppet to install, '0' to not install settings: version: '5.6'，使用浏览器前缀。

具有响应宽度的元素前的边距

3 个答案: