適用されない場合でもボーダーボトムが表示されるのはなぜですか？

Question

私は浮動小数点数を使って4ブロックのグリッドを設定しました。グリッドの項目では、すべての項目にborder-topを適用し、奇数の項目については境界線を作成しました。

何らかの理由で、奇数ブロックの底に何らかの境界があります。

この動作とそれに対する修正の理由は何ですか？

追加情報：この問題は、フレックスボックスを使用してグリッドを設定しても表示されません。

Codepenリンク：https://codepen.io/vikrantnegi007/full/NXKjOb/

.main-container6 { 
 
    float: left; 
 
    width: 100%; 
 
} 
 

 
.services-container { 
 
    float: left; 
 
    width: 50%; 
 
    position: relative; 
 
    border-top: 2px solid #fff; 
 
} 
 

 
.services-text-left { 
 
    text-align: left; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    color: #ffffff; 
 
    background: rgba(109, 109, 109, .75); 
 
    -webkit-transition: all .35s; 
 
    transition: all .35s; 
 
    z-index: 99; 
 
    width: 100%; 
 
} 
 

 
.services-container img { 
 
    display: block; 
 
    width: 100%; 
 
} 
 

 
.services-text-in { 
 
    padding: 60px; 
 
} 
 

 
.services-container:nth-child(2n+1) { 
 
    border-right: 2px solid #fff; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<section class="main-container6"> 
 
    <div class="services-container"> 
 
    <img alt="web-development" class="img-gray-scale" src="https://picsum.photos/1000 
 
"> 
 
    <div class="services-text-left bg-color"> 
 
     <div class="services-text-in"> 
 
     <h3>Lorem ipsum</h3> 
 
     <ul> 
 
      <li>Lorem ipsum</li> 
 
      <li>Lorem ipsum</li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="services-container"> 
 
    <img alt="web-development" class="img-gray-scale" src="https://picsum.photos/1000 
 
"> 
 
    <div class="services-text-left bg-color"> 
 
     <div class="services-text-in"> 
 
     <h3>Lorem ipsum</h3> 
 
     <ul> 
 
      <li>Lorem ipsum</li> 
 
      <li>Lorem ipsum</li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="services-container"> 
 
    <img alt="web-development" class="img-gray-scale" src="https://picsum.photos/1000 
 
"> 
 
    <div class="services-text-left bg-color"> 
 
     <div class="services-text-in"> 
 
     <h3>Lorem ipsum</h3> 
 
     <ul> 
 
      <li>Lorem ipsum</li> 
 
      <li>Lorem ipsum</li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="services-container"> 
 
    <img alt="web-development" class="img-gray-scale" src="https://picsum.photos/1000 
 
"> 
 
    <div class="services-text-left bg-color"> 
 
     <div class="services-text-in"> 
 
     <h3>Lorem ipsum</h3> 
 
     <ul> 
 
      <li>Lorem ipsum</li> 
 
      <li>Lorem ipsum</li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section>

Answer 1

あなたがbox-sizing: border-boxを使用しているので... border-rightを追加すると、今度は高さに影響を及ぼし、画像の幅に影響を与えます。

すべての項目にborder-rightを追加すると、高さが一致し、divが整列します。

demo on codepen

Answer 2

この効果は奇数conatainersすなわち（2N + 1）ために発生境界を持っているとさえコンテナすなわち（2N）は境界線がありません、あなたはこれを解決するために、代わりに、パディングを使用することができます。または

.services-container { 
    border-right: 2px solid #fff; 
} 

Answer 3

だけでそれをやって、なぜ私はその後flexbox._を使用してグリッドを設定すると

.services-container {border-right: 2px solid transparent;}