html - 使用 CSS 保持两列相同的高度

Question

我在一个容器中有两列。它们都有动态高度和不同的颜色背景。无论内容如何，​​我都希望两列始终是较高一列的大小。我如何使用 css 实现这一点？

HTML:

<div id="profile-bottom">
    <div id="bottom-left">
    </div>
    <div id="bottom-right">
    </div>
</div>

我尝试使用 display: table 和 table-cell，但似乎无法正常工作。

CSS:

#profile-bottom {
    display: table;
    position: relative;
    width: 450px;
    height: auto;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    border-radius: 0px 0px 4px 4px;
    overflow: hidden;
    z-index: 10;
}

 #bottom-left {
    display: table-cell;
    position: relative;
    float: left;
    margin: 0px 0px 0px 0px;
    padding: 95px 20px 20px 20px;
    height: auto;
    width: 150px;
    box-shadow: rgba(0, 0, 0, 0.147059) 0px 1px 8px 0px;
    background-color: #fff;
    z-index: 50;
}

#bottom-right {
    display: table-cell;
    position: relative;
    float: left;
    margin: 0px 0px 0px 0px;
    padding: 0px 20px 20px 20px;
    height: auto;
    min-height: 96px;
    width: 220px;
    background-color: #f5f5f5;
    z-index: 10;
}

Answer 1

给你: http://jsfiddle.net/ELKuf/

<div class="layout">
    <div class="columns-container">
        <div class="column">dasdas das das dsa kdas kdhsajk dhkas dhkjas kdsa dsa dsa as das dsa dsa das das das das dsa d asdsa
</div>
        <div class="column"> dsa dsa dsa das dsa</div>
    </div>
</div>


layout {
    display: table;
}

.layout .columns-container {
    display: table-row;
}

.layout .columns-container .column {
    display: table-cell;
    border: 1px solid black;
    width: 100px;
}