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

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

1 个答案: