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*/
}

Answer 2

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

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

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

Demo

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;
}

DEMO

设置div全宽并修复

4 个答案: