Question

我有一个父容器“ 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;
   }

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>

Answer 2

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

我们如何定位最合适的父母子女

2 个答案: