html - 我们如何定位最合适的 parent 的 child

Question

我有一个父容器“Streams”，它是 Childs“类(class)”，我要为每个子容器设置 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>

为了解决这个问题，我使用了但这只会影响最后一个 child 。

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

Answer 1

您需要做的是采用与 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>