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

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

0 голосов
/ 23 октября 2019

У меня есть родительский контейнер 'Streams', и это 'Childs' 'курс' 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;
   }

Ответы [ 2 ]

0 голосов
/ 23 октября 2019

Вы можете использовать этот код в (.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>
0 голосов
/ 23 октября 2019

Что вам нужно сделать, так это использовать подход, аналогичный 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>
...