html - 设置div全宽并修复

Question

我想使用 CSS 设置 div#divcontainerdata 以适应屏幕的整个宽度。

我的简化 HTML 是:

<div class="container">
    <div class="leftDiv2" style="width:300px;float: left;"></div>
    <div class="leftDiv1" style="width:300px;float: left;"></div>
    <div class="divcontainerdata"></div>
</div>

我希望最终产品看起来像这样:

|              |                  |
| div:leftdiv1 | divcontainerdata |
|              |                  |
| div:leftdiv1 |                  |

我怎样才能做到这一点？

Answer 1

Here

此外，导入 css 文件而不是使用内联样式是一种很好的做法。我已经相应地修改了您的代码。

HTML

<div class="container">
            <div class="leftDiv2">
        </div>
            <div class="leftDiv1">
        </div>
            <div class="divcontainerdata">
        </div>
</div>​

CSS

div {
    height: 100px; /*optional*/
}

.leftDiv1 {
    background-color: red; /*optional*/
    clear: left;
    float: left;
    width: 300px;
}

.leftDiv2 {
    background-color: blue; /*optional*/
    clear:left;
    float: left;
    width: 300px;
}

.divcontainerdata {
    background-color: yellow; /*optional*/
    width: 100%;
    margin-left: 300px; /*margin-left = width of leftDiv1, leftDiv2*/
}