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>

Answer 2

这是flexbox的工作。

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

Link to Flexbox Parameters 我只是使用col-md-12来演示哪个div需要flex属性。理想情况下，您添加一个类，您不希望每个col-md-12列都具有显示flex。

Answer 3

有许多方法可以解决这个问题，有些方法比其他问题更复杂。我绝对建议您查看CSS问题comprehensive list of solutions来解决此问题。另外，我并不完全确定你想要的最终结果是什么，但你可能想要从使用内联块切换到块并向左或向右浮动。但是你可能不需要。

Answer 4

您可以按照其他答案中的说明使用flexBox，也可以使用uint64_t simple_divmod(uint64_t n, uint64_t d) { if (n == 0 || d == 0) return 0; uint64_t q = 0; while (n >= d) { ++q; n -= d; } return n; }和display:table这样

请记住，display-flex可能会导致跨浏览器问题

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 {
 	display:table;
 }

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

4 个答案: