左のボーダーが高さでさえないdivのテーブルレイアウト

Question

私は4つの内側のdivのコンテナdivを持っています。どのようにborder-leftを最大の内部の高さに成長させるdiv？

ページが十分広い場合はすべて問題ありませんが、ブラウザを狭くすると、最初の内側のdivは複数行に浮かれますが、他のdivは一致しません。

.container 
 
{ 
 
    float:left; 
 
    border: 1px solid #D1D1D1; 
 
    width:100%; 
 
} 
 

 
.cell{ 
 
    float:left; 
 
    width:24%; /*interesting, x4 25% of a container will not work for 1 row when a boarder comes into play*/ 
 
    border-left: 1px solid #D1D1D1; 
 
}

<div class="container"> 
 
    <div class="cell">blah that is too big to fit inside a div that is 25% when the browser is a sensible size...this is made to be very very long... too long, the hope is that it will spill onto two or more rows. The problem is that the border left for the other divs are for 1 row</div> 
 
    <div class="cell">blah</div> 
 
    <div class="cell">blah</div> 
 
    <div class="cell">blah</div> 
 
</div>

jsfiddle：https://jsfiddle.net/Sniipe/nomey5b2/

Answer 1

利用flexの代わりfloat。

browser supportに注意してください。

.container 
 
{ 
 
    float:left; 
 
    border: 1px solid #D1D1D1; 
 
    width:100%; 
 
    display: flex; 
 
} 
 

 
.cell{ width:24%; /*interesting, 4 25% of a container will not work for 1 row when a boarder comes into play*/ 
 
    border-left: 1px solid #D1D1D1; 
 
}

<div class="container"> 
 
    <div class="cell">blah that is too big to fit inside a div that is 25% when the browser is a sensible size...this is made to be very very long... too long, the hope is that it will spill onto two or more rows. The problem is that the border left for the other divs are for 1 row</div> 
 
    <div class="cell">blah</div> 
 
    <div class="cell">blah</div> 
 
    <div class="cell">blah</div> 
 
</div>

あなたがdisplay: table-cellを使用することができ、古いブラウザをサポートします。あなたの代わりに.containerのfloat:leftに

.container 
 
{ 
 
    float:left; 
 
    border: 1px solid #D1D1D1; 
 
    width:100%; 
 
} 
 

 
.cell{ width:24%; /*interesting, 4 25% of a container will not work for 1 row when a boarder comes into play*/ 
 
    border-left: 1px solid #D1D1D1; 
 
    display: table-cell; 
 
}

<div class="container"> 
 
    <div class="cell">blah that is too big to fit inside a div that is 25% when the browser is a sensible size...this is made to be very very long... too long, the hope is that it will spill onto two or more rows. The problem is that the border left for the other divs are for 1 row</div> 
 
    <div class="cell">blah</div> 
 
    <div class="cell">blah</div> 
 
    <div class="cell">blah</div> 
 
</div>

Answer 2

使用display:flex。