2016-09-06 6 views
0

私はdivdisplay: flex、2人の子供には.left.rightと言うことがあります。 .left.rightのコンテンツサイズが異なります。私はここで、ここで子供フレックスボックス内で子供の身長を同じにします

に同じ高さを設定は、最小限の作業コードである

.container{ 
 
\t display: flex; 
 
\t align-items: center 
 
} 
 
.left, .right{ 
 
\t width: 50%; 
 
} 
 
.right{ 
 
\t background: blue; 
 
\t height: 100%; 
 
} 
 
.left{ 
 
\t background: green; 
 
\t height: 100%; 
 
}
<div class="container"> 
 
\t <div class="left"> 
 
\t \t <span>this dis also should have same width as right div</span> 
 
\t </div> 
 
\t <div class="right"> 
 
\t \t orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
\t </div> 
 
</div>

する質問

ためFiddleです:申請なしで解決策を選ぶg position: absolute私の実際のウェブサイトを破壊するであろう。

+0

http://stackoverflow.com/a/33815389/3597276 –

答えて

2

高さを取り除く:100%;それは問題を解決します..フレックスボックスは、子供たち自身の高さを適用します。

+0

削除align-item:centerも。ここには謎があります。https://jsfiddle.net/mL5scvsg/1/ – rmarif

+0

と、テキストセンターの左側にしたい場合は、それも表示させる必要があります:フレックスとそれにalign-itemを適用..ここにこれのためのフィドルです.. https://jsfiddle.net/mL5scvsg/2/ – rmarif

関連する問題