html - 需要 1 个 CSS Div 高度等于 2 个 CSS Div 高度

Question

我正在为我的网络编程类(class)编写代码。我在排列 DIV 标签时遇到问题。我需要他们是平等的，无论我做什么我都无法让他们工作。 .black 和 .grey 是同一部分，我不确定如何使它们均匀。

.css

.main {
    background-color:#e3e2e2;
    margin-bottom:1em;
    padding:10px;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    margin:93%;
    border-radius:20px;
    float:left;
    margin:20px;
}
.bg1 {
    background-color:#d2cdc8;
    border-top-left-radius:20px;
    border-bottom-left-radius:20px;
    width:65%;
    float:left;
}

.bg2 {
    background-color:#a79f97;
    border-top-right-radius:20px;
    width:35%;
    float:right;
}

.bg3 {
    background-color:#a79f97;
    border-bottom-right-radius:20px;
    width:35%;
    float:right;
}

.black {
    background-color:#3e3831;
    margin-left:10px;
    margin-right:10px;
    text-align:center;
    width:92%;
    border-top-left-radius:20px;
    border-top-right-radius:20px;
    float:right;
    margin-top:20px;
    margin-right:20px;
    margin-left:20px;
    color:#d6d3c6;
    font-family: TF2Build;
}

.grey {
    background-color:#514840;
    margin-left:10px;
    margin-right:10px;
    text-align:center;
    width:92%;
    border-bottom-left-radius:20px;
    border-bottom-right-radius:20px;
    float:right;
    margin-bottom:20px;
    margin-right:20px;
    margin-left:20px;
    color:#aba9a8;
}

.html

<div class="bg1">
    <div class="main">
        <p></p>
    </div>
</div>

<div class="bg2">
    <div class="black">
        <p>Test</p>
    </div>
</div>

<div class="bg3">
    <div class="grey">
        <p>Test</p>
    </div>
</div>

Js fiddle :

http://jsfiddle.net/W4Xb3/1/

Answer 1

我对您的 HTML 进行了一些更改，将其包装在“表格”div 中并将子项显示为表格单元格。 (删除 .bg3，因为不需要它)

HTML:

<div class="wrap">
    <div class="bg1">
        <div class="main">
            ...
        </div>
    </div>
    <div class="bg2">
        <div class="black">
            ...
        </div>
        <div class="grey">
            ...
        </div>
    </div>
</div>

CSS:

.wrap {
    display: table;
    width: 100%;
}
.bg1 {
    display: table-cell;
    vertical-align: top;
}
.bg2 {
    width:35%;
    display: table-cell;
    vertical-align: top;
}

还有 updated Fiddle .