使同一行的div高度相同-动态内容

Question

我正在开发一个应用程序，它生成动态内容并在浮动的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>

- Sohrab Hejazi

Answer 1

使用CSS3弹性盒子布局使#container适应弹性盒子布局。

flex-wrap的默认值为nowrap，因此它在单行中对齐。使用flex-wrap: wrap根据项目的宽度创建多行。

目前，浏览器对Flexbox的支持非常好：我能使用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>

- m4n0

---

Flexbox是否兼容所有浏览器？ - Sohrab Hejazi

现在它与所有主要浏览器兼容，包括带有“-ms-”前缀的IE10。 - m4n0

完美运行。谢谢。 - Sohrab Hejazi

请使用Edge浏览器。IE9已经过时，很快将不会被任何人使用。 - m4n0

Answer 2

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

- David P

Answer 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;
}

Fiddle: http://jsfiddle.net/q5jyfuy6/

（注：该文本为HTML格式的代码，其中包含一个链接）

- Phillip Chan

---

谢谢。但我无法在我的HTML中添加另一个类为row的div。内容是动态生成的。 - Sohrab Hejazi

Answer 4

您可以在.item类中添加像height:40px;这样的代码，使得div元素的高度与内容无关。

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

- Sudipta Maity