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

Question

У меня есть родительский контейнер «Потоки» и это «детский» курс «i, как установить поле margin-right: 10px для каждого дочернего элемента, за исключением того, что дочерний элемент появляется справа от родителя, если я использую» .course: nth-child (3n) «Это работает нормально, пока окно браузера не заполнится, когда мы изменим масштаб страницы или изменим размер окна, это не сработало должным образом.

.Streams {
       width: 100%;
       height: auto;
       padding: 40px 60px 40px 60px;
       display: flex;
      flex-wrap: wrap;
}
.course {
      width: 300px;
      border: 1px solid black;
      margin-right: 10px;
}

<div class="Streams">
    <div class="course">
        <img src="#" alt="BCA" />
        <p>
            div 1      
        </p>
    </div>
    <div class="course">
        <img src="#" alt="BCA" />
        <p>
            div 2      
        </p>
    </div>
    <div class="course">
        <img src="#" alt="BCA" />
        <p>
            div 3      
        </p>
    </div>
    <div class="course">
        <img src="#" alt="BCA" />
        <p>
            div 4      
        </p>
    </div>
    <div class="course">
        <img src="#" alt="BCA" />
        <p>
            div 4      
        </p>
    </div>
</div>

Чтобы исправить это, я использую, но это влияет только на самого последнего ребенка.

 .course:last-of-type{
     margin-right:0px;
   }

html css flexbox pseudo-class

0

Taqi Arzoo

Answer 1

Вы можете использовать этот код в (.course: last-child)

body {
  margin: 0;
}

.Streams {
  width: 100%;
  height: auto;
  padding: 40px 60px 40px 60px;
  display: flex;
  flex-wrap: wrap;
}

.Streams .course {
  width: 300px;
  border: 1px solid black;
  margin-right: 10px;
  margin-bottom: 5px;
}

.Streams .course:last-child {
  margin-right: 0px;
}

<div class="Streams">
  <div class="course">
    <img src="#" alt="BCA" />
    <p>
      div 1
    </p>
  </div>
  <div class="course">
    <img src="#" alt="BCA" />
    <p>
      div 2
    </p>
  </div>
  <div class="course">
    <img src="#" alt="BCA" />
    <p>
      div 3
    </p>
  </div>
  <div class="course">
    <img src="#" alt="BCA" />
    <p>
      div 4
    </p>
  </div>
  <div class="course">
    <img src="#" alt="BCA" />
    <p>
      div 4
    </p>
  </div>
</div>

Answer 2

Что вам нужно сделать, так это использовать подход Bootstrap для реализации его столбцов:

.Streams {
       padding: 60px -5px;
       ...
}
.course {
      ...
      margin: 0 5px;
}

Если расстояние между нужными компонентами равно Xpx, тогда формула имеет горизонтальное поле (x / 2) px для дочерних элементов и горизонтальное заполнение - (x / 2) px для родительского элемента.

.Streams {
       width: 100%;
       height: auto;
       padding: 40px -5px;
       display: flex;
      flex-wrap: wrap;
}
.course {
      width: 300px;
      border: 1px solid black;
      margin: 0 5px;
}

<div class="Streams">
    <div class="course">
        <img src="#" alt="BCA" />
        <p>
            div 1      
        </p>
    </div>
    <div class="course">
        <img src="#" alt="BCA" />
        <p>
            div 2      
        </p>
    </div>
    <div class="course">
        <img src="#" alt="BCA" />
        <p>
            div 3      
        </p>
    </div>
    <div class="course">
        <img src="#" alt="BCA" />
        <p>
            div 4      
        </p>
    </div>
    <div class="course">
        <img src="#" alt="BCA" />
        <p>
            div 4      
        </p>
    </div>
</div>

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

2 ответа

Новые вопросы

html