隣り合った高さが一致していない部分がある

Question

現在、<div>を2つ並べてheightと正確に一致させる問題があります。私がそれらを同じにする必要があるのは、heightです。<div>にはclassが含まれており、中断することなく参照する必要があります。left-vertical borderが適用されます。左の<div>が縦に拡張されても右のものは拡張されない場合、vertical borderは<div>の行の間の縦のギャップの長さを実行しません。

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

フレックスボックスは非常に頑丈なソリューションで、面白いマークアップも取り除きます。それはあなたの構造がで表形式であると見て、あなたがalign-items: stretchのおかげで同じ行の項目が同じ高さ（最も高い項目の高さ）であることを原因既定されて何をしたい

* { 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>