Html 使两列的高度相同，而不考虑内容

我有一个基本的网格系统，非常基本，它将“细胞”并排放置在一个流动的“行”中。我希望两个单元格始终匹配其高度，以便它们相等。因此，如果一个单元格的内容比另一个单元格的内容多，那么另一个单元格将扩展以匹配单元格的高度和更多内容

<div class="row">
    <div class="cell1">
        <div class="inner">
            <h2>Cell 1</h2>
            <p>Regardless of content, can I make Cell 1 and Cell 2 the same height so the borders are level?</p>            
        </div>
    </div>
    <div class="cell2">
        <div class="inner">
            <h2>Cell 2</h2>
        </div>
    </div>
</div>

第1单元
无论内容如何，我是否可以使单元格1和单元格2具有相同的高度，以使边框保持水平？

第2单元

---

这里的问题演示：

cel1cel2

我在这里使用jQuery实现了它：

$（文档）.ready（函数（）{
var height1=$（'.cell1>.inner'）.height（）；
var height2=$（'.cell2>.inner'）.height（）；
如果（高度1<高度2）{
$（'.cell1>.inner'）。高度（高度2）；
}否则{
$（'.cell2>.inner'）。高度（高度1）；
}
});

将边框从内部类更改为Cell1和Cell2类。然后给Cell1和Cell2类指定固定高度

.cell1 {
width: 45%;
margin-right: 1%;
float: left;
border: 1px solid #CCC;
height:400px; 
}

.cell2 {
width: 45%;
margin-left: 1%;
float: left;
border: 1px solid #CCC;
height:400px;
}

这是小提琴

---

我已经检查了你的小提琴，我认为可以通过增加最小高度270px（仅限ex.）来修复

我不是一个JSFIDLE用户，但请看下面的屏幕截图

注:

你只需要调整你的最小高度来满足你的需要。每当文本大小增大或减小时，都需要进行调整

---

但是，如果您的内容是动态的，这不是一个永久的解决方案。

在单元格中添加一个大的填充底部和一个相等的负边距底部，并将

溢出：隐藏
粘贴到您的行上

.cell {
    width: 50%;
    background: #eee;
    float: left;
    margin-bottom: -1000px;
    padding-bottom: 1000px;
}

.cell:nth-child(odd) { background: #ddd; }

.row { overflow: hidden; }

.row:after {
    content: "";
    clear: both;
    display: table;
}

示例如下：

如果您必须绝对避免使用表，您可以将您的div设置为与带有

display: table;
display: table-row;
display: table-cell;

您可以查看标记/css，并在这里查看结果：
您可以使用

显示：表格

及

显示：表格单元格

我已经修改了你的JSFIDLE-

还有我之前创建的另一个JSFIDLE-
是否需要边界？有一个CSS解决方案，但它要求您不使用边框。有什么理由不使用表格吗？我知道这是“禁忌”，但这正是他们所做的。你的权利，让生活变得比需要的更艰难。边框是必要的，DIV布局不是。那么表格应该是当你说cells时，我们得到了一个错误的图片，你说的是html表格元素，比如or，但是你有，和。等高细胞是不同的物质。至于众所周知的等高圆柱——我的错。我没有正确理解你的问题。为此，您可以使用Javascript。当一列超过最小高度时会发生什么情况？实际上，它是基于css的固定格式，可以应用于静态页面。正如我上面提到的，在我的笔记上。当一个或两个单元格超过最小高度时，它将再次不均匀。所以你必须再次调整你的最小高度。
display: table;
display: table-row;
display: table-cell;