적용되지 않은 경우에도 테두리 하단이 나타나는 이유는 무엇입니까?

Question

플로트를 사용하여 4 개의 블록으로 그리드를 설정했습니다. 그리드 아이템에 대해서는 모든 항목에 border-top을 적용하고 홀수 항목에 대해서는 경계선 오른쪽에 적용했습니다.

하지만 몇 가지 이유로, 홀수 블록의 맨 아래에 테두리가 있습니다.

이 문제와 그와 관련된 수정 사항에 대한 이유는 무엇입니까?

추가 참고 사항 : 플렉스 박스를 사용하여 그리드를 설정하면이 문제가 나타나지 않습니다.

Codepen 링크 : border-right를 추가 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을 추가하면 높이가 일치하고 div가 정렬됩니다. 홀수 conatainers은 즉 (2N + 1)의 경계에도 컨테이너 즉 (2N)가 테두리가없고,이 작업을 해결하는 대신에 패딩을 사용할 수 있기 때문에

demo on codepen

Answer 2

이러한 효과가 발생한다. 또는

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

Answer 3

그냥 함께 그 일을 내가 왜 그런 flexbox._를 사용하여 격자를 설정할 때

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