Question

我已经设置了一行div，我想删除我在行的最后一个div和底部页边距中用于分隔每个页距的边距。

#feature-box-container {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.feature-box {
  display: inline-flex;
  flex-grow: 1;
  width: 300px;
  padding: 12px;
  color: grey;
  border: 1px solid #4F5B93;
  border-radius: 8px;
  margin-right: 50px;
  margin-bottom: 50px;
}

.feature-box img {
  height: 48px;
  width: auto;
  margin-right: 18px;
}

.feature-box p {
  word-wrap: break-word;
  margin: 0;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

<div id="feature-box-container">

  <div class="feature-box">

    <img src="images/router-icon.png">

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in nisi mollis lacus sagittis</p>

  </div>

  <div class="feature-box">

    <img src="images/template-icon.png">

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in nisi mollis lacus sagittis</p>

  </div>

  <div class="feature-box">

    <img src="images/security-icon.png">

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in nisi mollis lacus sagittis</p>

  </div>

  <div class="feature-box">

    <img src="images/ssl-icon.png">

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in nisi mollis lacus sagittis.</p>

  </div>

  <div class="feature-box">

    <img src="images/data-access-icon.png">

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in nisi mollis lacus sagittis</p>

  </div>

  <div class="feature-box">

    <img src="images/notification-icon.png">

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in nisi mollis lacus sagittis</p>

  </div>

</div>

我已经设置了50px的margin-right和margin-bottom，但是我不希望将其应用于行的最后一个div和底部的div。

最好扩展代码段以查看div的行。

是否可以使用CSS并仍然能够添加新的div？

Answer 1

您可能会寻找https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child

：last-child CSS伪类表示一组同级元素中的最后一个元素。

#feature-box-container {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.feature-box {
  display: inline-flex;
  flex-grow: 1;
  width: 300px;
  padding: 12px;
  color: grey;
  border: 1px solid #4F5B93;
  border-radius: 8px;
  margin-right: 50px;
  margin-bottom: 50px;
}

.feature-box:last-child {
  margin-bottom: auto;/* or 0 */
}

.feature-box img {
  height: 48px;
  width: auto;
  margin-right: 18px;
}

.feature-box p {
  word-wrap: break-word;
  margin: 0;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

<div id="feature-box-container">

  <div class="feature-box">

    <img src="images/router-icon.png">

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in nisi mollis lacus sagittis</p>

  </div>

  <div class="feature-box">

    <img src="images/template-icon.png">

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in nisi mollis lacus sagittis</p>

  </div>

  <div class="feature-box">

    <img src="images/security-icon.png">

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in nisi mollis lacus sagittis</p>

  </div>

  <div class="feature-box">

    <img src="images/ssl-icon.png">

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in nisi mollis lacus sagittis.</p>

  </div>

  <div class="feature-box">

    <img src="images/data-access-icon.png">

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in nisi mollis lacus sagittis</p>

  </div>

  <div class="feature-box">

    <img src="images/notification-icon.png">

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in nisi mollis lacus sagittis</p>

  </div>

</div>

Answer 2

有很多方法可以消除上一个孩子的利润。您也可以使用：last-child伪选择器从最后一个child中删除边距。您还可以使用:not selector删除上一个孩子的边距。就像这样。

<div id="feature-box-container">

  <div class="feature-box">

    <img src="images/router-icon.png">

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in nisi mollis lacus sagittis</p>

  </div>

  <div class="feature-box">

    <img src="images/template-icon.png">

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in nisi mollis lacus sagittis</p>

  </div>

  <div class="feature-box">

    <img src="images/security-icon.png">

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in nisi mollis lacus sagittis</p>

  </div>

  <div class="feature-box">

    <img src="images/ssl-icon.png">

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in nisi mollis lacus sagittis.</p>

  </div>

  <div class="feature-box">

    <img src="images/data-access-icon.png">

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in nisi mollis lacus sagittis</p>

  </div>

  <div class="feature-box">

    <img src="images/notification-icon.png">

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in nisi mollis lacus sagittis</p>

  </div>

</div>

css：

#feature-box-container {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.feature-box {
  display: inline-flex;
  flex-grow: 1;
  width: 300px;
  padding: 12px;
  color: grey;
  border: 1px solid #4F5B93;
  border-radius: 8px;
  margin-right: 50px;
}
.feature-box:not(:last-child){
  margin-bottom: 50px;
}
.feature-box img {
  height: 48px;
  width: auto;
  margin-right: 18px;
}

.feature-box p {
  word-wrap: break-word;
  margin: 0;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

，或者您也可以使用:nth-last-of-type() Selector删除最后一个子边距。您可以选择其中任意一个以删除上一个子页边距。

谢谢

应用边距时如何不连续选择最后一个和最后一个div

2 个答案: