두 개의 왼쪽 정렬 된 단락 사이에 세로 테두리를 정확히 배치 할 수있는 방법이 있습니까?

Question

텍스트가있는 기초 열 2 개가 나란히 있습니다.

<link href="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.css" rel="stylesheet" /> 
 

 
<div class="row"> 
 
    <div class="column medium-6"> 
 
    Content 
 
    </div> 
 
    <div class="column medium-6 border-left"> 
 
    Content 
 
    </div> 
 
</div>

이 텍스트 주위에 패딩이며이 왼쪽으로 정렬됩니다

. 나는 그들 사이에 분할 경계를 넣어 싶어하지만, 물론, 텍스트 명분으로, 나는 다음과 같이 치우치는 모습을 얻을 :

나는 패딩 장난 시도했지만,이 아니다 반응 형.

국경을 모든 화면 너비의 중앙에 나타낼 수있는 방법이나 방법이 있습니까?

Answer 1

외부 컨테이너에 100 % 너비를 지정하고 내부 컨테이너에는 외부 컨테이너를 다시 나누기 원하는 너비를 지정합니다. 마지막 내부 컨테이너에 왼쪽 테두리 CSS를 적용합니다.

<div class="row"> 
    <div class="col-md-6"> 
    Content 
    </div> 
    <div class="col-md-6" style="border-left: 1px solid grey;"> 
    Content 
    </div> 
</div>