需要1个CSS分区高度等于2个CSS分区高

Question

我正在为我的web编程类创建一个代码。我在整理DIV标签时遇到了问题。我需要他们平等，无论我做什么，我都无法让他们工作。黑色和灰色是同一部分，我不知道怎么做才能使它们均匀。

.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做了一些更改，将其包装在一个"table"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;
}

更新了Fiddle。

Answer 2

您正在与修改高度/宽度的边界/边距/填充问题作斗争。IE在v9之前默认使用边框框，所有其他浏览器和新版本的IE都使用内容框。唯一一次我承认IE让事情变得更容易：

http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

试着在所有东西上加边框，然后重新调整你的高度/宽度值。