如何在具有百分比宽度的 div 之间留出边距？

Question

我想要页面的 width: 25%; 四列。列之间应该有 10px 的边距（即 margin-right: 10px;）。 last:child 语句（对于 margin-right: 0px; 由于层次结构而不起作用。

我该如何解决？

谢谢！

body {
  margin: 0;
}
article {
  height: auto;
  width: 100%;
}
.content {
  background-color: #dbdbdb;
  float: left;
  height: 200px;
  margin-right: 10px;
  width: 25%;
}
.content:last-child {
  margin-right: 0;
}
.top {
  background-color: #ff0000;
  float: left;
  height: 50%;
  width: 100%;
}

<html>

<head>
  <link rel="stylesheet" href="stylesheet.css" type="text/css">
</head>

<body>
  <article>
    <div class="content">
      <div class="top">
        Top
      </div>
    </div>
  </article>

  <article>
    <div class="content">
      <div class="top">
        Top
      </div>
    </div>
  </article>

  <article>
    <div class="content">
      <div class="top">
        Top
      </div>
    </div>
  </article>

  <article>
    <div class="content">
      <div class="top">
        Top
      </div>
    </div>
  </article>
</body>

</html>

Answer 1

只需在父级上使用 :last-child。看到这个 .

article:last-child > .content {
margin-right: 0;
}

正如@Shehary 指出的那样，您没有足够的 space 作为边距，因为 .container 被定义为 25%，而您有四个 = 100%。

要避免这种情况，您必须从每个 .content 中删除总边距。只有 3 个 margin-right，因为最后一个是 0，所以 3 * 10 = 30。30 / 4 = 7.5。让我们四舍五入到 8，因为分数可能会导致其他恼人的渲染问题，

这意味着您应该为宽度 (fiddle) 计算 (25% - 8px):

.content {
  background-color: #dbdbdb;
  float: left;
  height: 200px;
  margin-right: 10px;
  width: calc(25% - 8px); /** width with margin allowance **/
}

Answer 2

flexbox可以做到

body {
  margin: 0;
  display: flex;
  justify-content: space=between;
}
article {
  flex: 1;
  margin-right: 10px;
}
article:last-of-type {
  margin-right: 0;
}
.content {
  background-color: #dbdbdb;
  height: 200px;
}
.top {
  background-color: #ff0000;
  height: 50%;
  width: 100%;
}

<article>
  <div class="content">
    <div class="top">Top</div>
  </div>
</article>
<article>
  <div class="content">
    <div class="top">Top</div>
  </div>
</article>
<article>
  <div class="content">
    <div class="top">Top</div>
  </div>
</article>
<article>
  <div class="content">
    <div class="top">Top</div>
  </div>
</article>

如何在具有百分比宽度的 div 之间留出边距？

How make margins between divs with a percentage width?

css

margin