Question

我希望页面的width: 25%;有四列。在列之间应该有10px的余量（即margin-right: 10px;）。 last:child语句（margin-right: 0px;语句由于层次结构而无效。

我该如何解决这个问题？

谢谢！

＆＃13;

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%;
}

＆＃13;

<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>

＆＃13;

Answer 1

只需在父级上使用：last-child。请参阅此question and answer。

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

正如@Shehary指出的那样，你没有足够的空间用于保证金，因为.container定义为25％，而你有4 = 100％。

为了避免这种情况，您必须从每个.content中删除总余量。只有3个边距右，因为最后是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之间设置边距？

2 个答案: