同じ行のdivを同じ高さにする - 動的コンテンツ

Question

動的コンテンツを生成して浮動小数点divに表示するアプリケーションで作業しています。各divはページの幅の49％を占めます。私が取り組んでいる問題は、divの高さは内容によって異なるということです。

私が探しているのは、同じ行のdivを同じ高さにすることです。助言がありますか？ #containerは柔軟ボックスのレイアウトを適応させるためにCSS3 flexboxを使用し

.item { 
 
    background: #c4c4c4; 
 
    width: 49%; 
 
    border: 1px solid black; 
 
    float: left; 
 
}

<div id="container"> 
 
    <div class="item"> 
 
     Test 
 
    </div> 
 
    <div class="item"> 
 
     Hello. 
 
     Sample <br> 
 
     Content <br> 
 
    </div> 
 
    <div class="item"> 
 
     Test<br> 
 
     Sample Content 
 
    </div> 
 
    <div class="item"> 
 
     Test 
 
    </div> 
 
</div>

Answer 1

。

フレックスラップのデフォルト値はnowrapです。したがって、1行に整列します。アイテムの幅に基づいて複数の行を作成するには、flex-wrap: wrapを使用します。フレキシボックス用

現在のブラウザのサポートはかなり良いです：Can I use Flexbox?

#container { 
 
    display: flex; 
 
    flex-wrap: wrap; /* Wrap after the items fill the row */ 
 
    
 
    /* Safari specific rules */ 
 
    display: -webkit-flex; 
 
    -webkit-flex-wrap: wrap; 
 
} 
 
.item { 
 
    background: #c4c4c4; 
 
    border: 1px solid black; 
 
    width: 49%; 
 
}

<div id="container"> 
 
    <div class="item"> 
 
    Test 
 
    </div> 
 
    <div class="item"> 
 
    Hello. Sample 
 
    <br>Content 
 
    <br> 
 
    </div> 
 
    <div class="item"> 
 
    Test 
 
    <br>Sample Content 
 
    </div> 
 
    <div class="item"> 
 
    Test 
 
    </div> 
 
</div>

Answer 2

使用表示：含むdivの上のテーブル、および表示：ブロック、あなたの "表のセル" のdivに。

Answer 3

もう1つの答えは、CSSのdisplay：tableプロパティの使用です。これはテーブルの足場に似ていますが、CSSではるかに柔軟性があり、フレックスボックスよりも多くのブラウザをサポートしています。

HTML：

<div id="container"> 
    <div class="row"> 

     <div class="item"> 
     Test 
     </div> 
     <div class="item"> 
     Hello. 
     Sample <br> 
     Content <br> 
     </div> 
    </div> 

    <div class="row"> 
     <div class="item"> 
     Test<br> 
     Sample Content 
    </div> 
     <div class="item"> 
      Test 
     </div> 
    </div> 
</div> 

CSS：

#container { 
    width: 100%; 
    display: table; 
} 
.row { 
    display: table-row; 
} 

.item { 
    background: #c4c4c4; 
    width: 49%; 
    box-sizing: border-box; 
    border: 1px solid black; 
    display: table-cell; 
} 

フィドル： http://jsfiddle.net/q5jyfuy6/

Answer 4

あなたは高さのように追加することができます。40ピクセル。 .itemクラスのを使用すると、divの高さをコンテンツとは独立させることができます。

.item { 
    background: #c4c4c4; 
    width: 49%; 
    border: 1px solid black; 
    float: left; 
    height:40px; 
}