Как не выбирать последний и нижний делители подряд при применении поля

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>

Я установил margin-right и margin-bottom в 50px, но я не хочу, чтобы это применялось к последнему div в строке и нижним.

Вероятно, лучше всего развернуть фрагмент, чтобы увидеть ряды элементов div.

Возможно ли это с помощью CSS и при этом можно добавлять новые div?

Answer 1

Есть много способов убрать маржу с последнего потомка. Вы также можете использовать: псевдо-селектор last-child, чтобы удалить поле из последнего child.or Вы также можете использовать : не селектор для удаления поля из последнего дочернего элемента. вот так.

<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 () для удаления последнего дочернего поля. Вы можете выбрать любой из них, чтобы удалить последнее дочернее поле.

спасибо

Answer 2

Вы, вероятно, ищете 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>