使同一行上的 div 具有相同的高度 - 动态内容答案

【问题标题】：Make divs on same row the same height - Dynamic Content使同一行上的 div 具有相同的高度 - 动态内容
【发布时间】：2015-09-24 03:44:34
【问题描述】：

我正在开发一个生成动态内容并将它们显示在浮动 div 上的应用程序。每个 div 占页面宽度的 49%。我遇到的问题是 div 的高度因内容而异。

我要做的是使同一行上的 div 具有相同的高度。有什么建议吗？

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

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

使用CSS3 flexbox 使#container 适应灵活的盒子布局。

flex-wrap 的默认值是nowrap，所以它在一行中对齐。使用flex-wrap: wrap 根据项目的宽度创建多行。

当前浏览器对 Flexbox 的支持相当不错：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>

【讨论】：

flexbox 兼容所有浏览器吗？
现在兼容所有主流浏览器，包括带有-ms-前缀的IE10
完美运行。谢谢
请使用 Edge。 IE9 已经过时了，不会很快被任何人使用。

【解决方案2】：

在包含的 div 上使用 display: table，并在您的“表格单元格”div 上使用 display: block。

【讨论】：

【解决方案3】：

另一个答案是使用 CSS 中的 display: table 属性。它类似于表格脚手架，但在 CSS 方面具有更大的灵活性，并且比 flexbox 具有更多的浏览器支持。

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/

【讨论】：

谢谢。但是我不能在我的 html 中添加另一个带有类行的 div。内容是动态生成的。

【解决方案4】：

您可以在 .item 类中添加 height:40px; 之类的内容，以使 div 的高度独立于内容。

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

【讨论】：