html - 设置 div 全宽并修复

Question

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

我的简化 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

这里

此外，导入 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*/
}

​ ​</p>

Answer 2

设置float: left; clear: left为前两个 div，然后设置margin-left: 300px为第三个 div。

.leftDiv1, .leftDiv2 {
    width: 300px;
    float: left;
    clear: left;
}

.divcontainerdata {
    margin-left: 300px; /* the width of the floated divs */
}

演示

Answer 3

<style>    
    #left {
    border: 1px solid #000000; /* Delete it */

    float: left;

    width: 300px;
    }

    #content {
    width: 100%;
    border: none;
    }
</style>

<div id="container">
    <div id="left">
    <div id="left_1">
        Left 1
    </div>
    <div id="left_2">
        Left 2
    </div>
    </div>
    <div id="content">
    Content
    </div>
</div>

Answer 4

HTML

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

CSS

.leftDiv1, .leftDiv2{
    clear:left;
    width:300px;
    float: left;
    border:solid black 1px;
    margin:2px;
}
.divcontainerdata{
    border:solid black 1px;
    margin:2px;
    display:inline-block;
}

演示。