Question

我正在为我的网络编程类创建一个代码。我的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进行了一些更改，将其包装在“table”div中，并将子项显示为tablecells。（删除.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。

Answer 2

你正在解决边框/边距/填充修改高度/宽度的问题。在v9之前的IE使用border-box作为默认值，所有其他浏览器和新版本的IE使用内容框。我唯一一次承认IE让事情变得更容易：

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

在所有内容上尝试边框，然后重新调整高度/宽度值。

需要1 CSS Div高度等于2 CSS Div Heights

2 个答案: