时间戳

首页 > 解决方案 > 我们如何定位最正确的父母的孩子

html - 我们如何定位最正确的父母的孩子

问题描述

我有一个父容器'Streams'，它是Childs'course'我要设置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;
   }

标签： htmlcssflexboxpseudo-class

解决方案

您可以在 (.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>

推荐阅读