2

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

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

这里的问题演示：http: //jsfiddle.net/QDBff/

4

7 回答 7

5

如果您绝对必须避免使用 TABLE，您可以设置 div 的样式，使其表现得像带有

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

您可以在这个小提琴中查看标记/css 和结果：http: //jsfiddle.net/aeinbu/QDBff/35/

于 2013-05-16T10:57:34.547 回答
2

我使用 jQuery 使它在这里工作：http: //jsfiddle.net/QDBff/10/

$(document).ready(function() {
    var height1 = $('.cell1 > .inner').height();
    var height2 = $('.cell2 > .inner').height();
    if (height1 < height2) {
        $('.cell1 > .inner').height(height2);
    } else {
        $('.cell2 > .inner').height(height1);
    }
});
于 2013-05-16T10:30:52.023 回答
1

<table><tr><td>Cel 1</td><td>Cel 2</td></tr></table>

于 2013-05-16T10:30:21.897 回答
0

你可以通过使用来实现这一点

display: table

和

display: table-cell

我已经修改了你的 jsfiddle - http://jsfiddle.net/Raver0124/QDBff/36/

还有我之前创建的另一个 jsfiddle - http://jsfiddle.net/jBMBR/6/

于 2013-05-16T11:00:43.630 回答
0

我已经检查了你的小提琴，我认为可以通过添加 270px 的最小高度来修复它（仅用于前）。

我不是 jsfiddle 用户，但请看下面的屏幕截图......

在此处输入图像描述

笔记：

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

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

于 2013-05-16T10:42:56.447 回答
0

为您的单元格添加一个大的填充底部和一个相等的负边距底部并粘overflow: hidden在您的行上。

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

这里的例子：

http://jsfiddle.net/Q9U6g/1/

于 2013-05-16T10:57:21.150 回答
-2

将边框从 Inner 类更改为 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;
}

这是小提琴 http://jsfiddle.net/QDBff/31/

于 2013-05-16T10:38:09.143 回答