コンテンツに関連するすべてのdivの高さを合わせる

Question

私はメインディビジョンの内側に3つのdivを持っています。私はすべてのdivsの高さを等しく整列させる必要があります。 1つのdivにはより多くの内容があり、別のdivには最初のdivより小さな内容があります。しかし、両方のdivsの高さが同じである必要があります。ここ

.align { 
 
display: inline-block; 
 
background-color : gray; 
 
margin-left : 5px; 
 
border : 1px solid #000; 
 
width : 100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
 
<div class = "col-md-12"> 
 
    <div class = "col-md-4 align"> 
 
    <p>hiiii</p> 
 
    <p>hello</p> 
 
    </div> 
 
    <div class = "col-md-4 align"> 
 
    <p>hiiii</p> 
 
    <p>hello</p> 
 
    <p>hiiii</p> 
 
    <p>hello</p> 
 
    <p>hiiii</p> 
 
    <p>hello</p> 
 
    </div> 
 
    <div class = "col-md-4 align"> 
 
    <p>hiiii</p> 
 
    <p>hello</p> 
 
    </div>

、高さが異なっています。私はすべてのdivsの高さを同じにする必要があります。コンテンツを追加または削除するときは、すべての部門の高さを自動的に調整する必要があります。私を助けてください。

ありがとうございます。

Answer 1

列を追加するときはいつでも、行を追加することを忘れないでください。列ごとに同じ高さにするには、display:flex;を行に追加する必要があります。スニペットからのコードの変更は次のとおりです。 。他のものよりいくつかのより複雑、作業この問題へのアプローチの数があります

.align { 
 
display: inline-block; 
 
background-color : gray; 
 
margin-left : 5px; 
 
border : 1px solid #000; 
 
width : 100px; 
 
} 
 
.row { 
 
    display: flex; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
 
    <div class = "row"> 
 
    <div class = "col-md-4 align"> 
 
     <p>hiiii</p> 
 
     <p>hello</p> 
 
    </div> 
 
    <div class = "col-md-4 align"> 
 
     <p>hiiii</p> 
 
     <p>hello</p> 
 
     <p>hiiii</p> 
 
     <p>hello</p> 
 
     <p>hiiii</p> 
 
     <p>hello</p> 
 
    </div> 
 
    <div class = "col-md-4 align"> 
 
     <p>hiiii</p> 
 
     <p>hello</p> 
 
    </div> 
 
</div>

Answer 2

これはflexboxの仕事です。

div.col-md-12{align-items: stretch; display: flex;} 

Link to Flexbox Parameters 私はフレックスプロパティを必要とするのdivを証明するためにCOL-MD-12を使用していました。理想的には、クラスを追加すると、すべてのcol-md-12カラムに表示のフレックスが必要なわけではありません。

Answer 3

。私は間違いなくCSS-Tricks comprehensive list of solutionsをチェックすることをお勧めします。また、あなたの最終的なものをどのように見せているか正確にはわかりませんが、インラインブロックの使用からブロックへの切り替え、左または右への浮動の切り替えが必要な場合があります。あなたは、しかし、する必要はありません。

Answer 4

ので

が表示-Flexはクロスブラウザの問題を引き起こす可能性があることに注意してください他の回答で述べたように、あなたはフレキシボックスを使用するか、のような display:tableと display:table-cellを使用することができます

.align { 
 
display: inline-block; 
 
background-color : gray; 
 
margin-left : 5px; 
 
border : 1px solid #000; 
 
width : 100px; 
 
display:table-cell; 
 
} 
 
.col-md-12 { 
 
    \t display:table; 
 
} 
 

<div class = "col-md-12"> 
 
    <div class = "col-md-4 align"> 
 
    <p>hiiii</p> 
 
    <p>hello</p> 
 
    </div> 
 
    <div class = "col-md-4 align"> 
 
    <p>hiiii</p> 
 
    <p>hello</p> 
 
    <p>hiiii</p> 
 
    <p>hello</p> 
 
    <p>hiiii</p> 
 
    <p>hello</p> 
 
    </div> 
 
    <div class = "col-md-4 align"> 
 
    <p>hiiii</p> 
 
    <p>hello</p> 
 
    </div>