html - 对齐与其内容相关的所有 div 的高度

Question

我在一个主 div 中有 3 个 div。我需要平均对齐所有 div 的高度。一个 div 的内容更多，另一个 div 的内容少于第一个 div。但我需要两个 div 高度相同。

.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>

这里，高度不同。我需要所有的 div 高度应该相同。添加或删除内容时，应自动调整所有 div 的高度。请帮助我。

谢谢。

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>