나란히 일치하는 높이가 나란히있는

Question

height과 정확하게 일치하는 두 개의 <div>이 나란히 표시되는 문제가 있습니다. 두 제품이 모두 동일해야하는 이유는 바로 <div>에 class이 포함되어 있기 때문에 우리가 방해받지 않고보고해야하는 left-vertical border이 적용되기 때문입니다. 왼쪽 <div>이 세로로 확장되지만 오른쪽으로는 확장되지 않으면 <div> 행 사이의 세로 간격의 길이를 실행하지 않는 vertical border이 있습니다.

display: table, display: table-row 및 display: table-cell을 사용하는 수많은 솔루션을 시도해 보았습니다. 아래 설정을 볼 수 있습니다. 이미지에서 볼 수 있듯이 우리가 격차 왼쪽되지 않도록

JSFiddle #1 of the issue

우리의 주요 관심사는 지속적으로 실행 vertical border을 유지하고있다. Vertical Gap Image

우리는 또한 vertical border 색상에 background color 동일하게 설정하고 기본적으로 margin와 border를 만드는 방법에 대해 생각했다.

위의 전체 문서는 거의 비슷한 방식으로 배열되어 있으며 CSS에 생성되며 테이블이 없습니다. 주요 재 작성이 필요없는 솔루션을 찾고자합니다.

감사합니다. 플로트를 제거하기

관련 코드

.column2, 
.column3 { 
    float: left; 
    margin-bottom: 30px; 
} 

.column2 { 
    width: 45%; 
    margin-bottom: 0 !important; 
    padding-top: 3px; 
    padding-bottom: 3px; 
} 

.column3 { 
    width: 30.7%; 
} 

.column2, 
.column3 { 
    min-width: 190px; 
    padding-left: 20px; 
} 

.column2:first-of-type, 
.column3:first-of-type { 
    padding-left: 0; 
} 

.left-vertical-border { 
    border-left: 1px solid #BFB9B9; 
    height: 100%; 
} 

.table-wrapper { 
    display: table; 
    padding-left: 20px; 
    width: 100%; 
} 

.table-row-wrapper { 
    display: table-row; 
} 

.table-cell { 
    display: table-cell; 
} 
<div class="table-wrapper"> 
    <div class="table-row-wrapper"> 
    <div class="column2 table-cell">question text</div> 
    <div style="display: table-cell;" class="column2 left-vertical-border">textanswer text answer</div> 
    </div> 
</div>  
    <div class="table-wrapper"> 
    <div class="table-row-wrapper"> 
    <div class="column2 table-cell">question textquestion textquestion textquestion textquestion textquestion textquestion textquestion text</div> 
    <div class="column2 left-vertical-border table-cell">textanswer text answer</div> 
    </div> 
</div> 

<div class="table-wrapper"> 
    <div class="table-row-wrapper"> 
    <div class="column2 table-cell">question text</div> 
    <div class="column2 left-vertical-border table-cell">textanswer text answer</div> 
    </div> 
</div> 

Answer 1

는 문제를 해결하기 위해 보인다.

.column2, .column3 { 
    /* float: left; */ 
    margin-bottom: 30px; 
} 

Answer 2

플렉스 박스는 매우 강력한 솔루션으로 재미있는 마크 업을 제거합니다. 그것은 당신이 표가에있는 같은 행에 항목을 일으키는 기본이 당신의 구조로 보면 같은 높이 (가장 높은 항목의 높이)

* { box-sizing: border-box; } 
 

 
.question-wrap { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    padding: 0 10px; 
 
} 
 

 
.question { 
 
    flex: 0 0 45%; 
 
} 
 

 
.answer { 
 
    flex: 0 0 55%; 
 
    border-left: 1px solid #BFB9B9; 
 
} 
 

 
.question, 
 
.answer { padding: 10px; }

<div class="question-wrap"> 
 
    <div class="question">question text</div> 
 
    <div class="answer">textanswer text answer</div> 
 

 
    <div class="question">question textquestion textquestion textquestion textquestion textquestion textquestion textquestion text</div> 
 
    <div class="answer">textanswer text answer</div> 
 

 
    <div class="question">question text</div> 
 
    <div class="answer">textanswer text answer</div> 
 
    
 
    <div class="question">question text</div> 
 
    <div class="answer">textanswer text answer</div> 
 

 
    <div class="question">question textquestion textquestion textquestion textquestion textquestion textquestion textquestion text</div> 
 
    <div class="answer">textanswer text answer</div> 
 

 
    <div class="question">question text</div> 
 
    <div class="answer">textanswer text answer</div> 
 

 
    <div class="question">question text</div> 
 
    <div class="answer">textanswer text answer extra long right hand side to show that the vertical border sticks</div> 
 
    </div>