html - divの全幅を設定して修正

Question

div#divcontainerdataCSSで画面幅いっぱいに設定したい。

私の簡略化された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最初の 2 つの div に設定し、次に3margin-left: 300px番目の div に設定します。

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

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

デモ

Answer 3

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

デモ。

Answer 4

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