複数のdivを含むラッパーの下にdivを配置する

Question

これは簡単かもしれません。以下は、私が作成する構造である：

しかし、私はいつもこのいずれかで終わる：

またはこの：ここ

私のコードは

01です

HTML

.newdiv2, 
 
.newdiv3, 
 
.newdiv4, 
 
.newdiv5 { 
 
    width: 25px; 
 
    height: 25px; 
 
    margin-bottom: 5px; 
 
    border: 3px solid black; 
 
} 
 
.newdiv6 { 
 
    width: 150; 
 
    height: 150; 
 
    border: 3px solid black; 
 
} 
 
.newdiv { 
 
    height: 250px; 
 
    width: 450px; 
 
    float: left; 
 
    border: 3px solid black; 
 
} 
 
.divwrapper { 
 
    float: left; 
 
    border: 3px solid blue; 
 
} 
 
.mainwrapper { 
 
    display: block; 
 
}

<div class="mainwrapper"> 
 
    <div class="newdiv"></div> 
 
    <div class="divwrapper"> 
 
    <div class="newdiv2"></div> 
 
    <div class="newdiv3"></div> 
 
    <div class="newdiv4"></div> 
 
    <div class="newdiv5"></div> 
 
    </div> 
 
</div> 
 
<div class="newdiv6"></div>

これは（私のChromeブラウザで）上記第二の画像のように見えます。

Answer 1

また、本体容器のblock formating contextをリセットするので、内部の心と外floatting要素することができます。

ここで最も単純で追加することです：overflow:hidden;をなし大きさははあなたがDIVをクリアする必要が

.newdiv2, 
 
.newdiv3, 
 
.newdiv4, 
 
.newdiv5 { 
 
    width: 25px; 
 
    height: 25px; 
 
    margin-bottom: 5px; 
 
    border: 3px solid black; 
 
} 
 
.newdiv6 { 
 
    width: 150px; 
 
    height: 150px; 
 
    border: 3px solid black; 
 
} 
 
.newdiv { 
 
    height: 250px; 
 
    width: 450px; 
 
    float: left; 
 
    border: 3px solid black; 
 
} 
 
.divwrapper { 
 
    float: left; 
 
    border: 3px solid blue; 
 
} 
 
.mainwrapper { 
 
    display: block; 
 
    /* reset bfc */ 
 
    overflow:hidden; 
 
}

<div class="mainwrapper"> 
 
    <div class="newdiv"></div> 
 
    <div class="divwrapper"> 
 
    <div class="newdiv2"></div> 
 
    <div class="newdiv3"></div> 
 
    <div class="newdiv4"></div> 
 
    <div class="newdiv5"></div> 
 
    </div> 
 
</div> 
 
<div class="newdiv6"></div>

Answer 2

<div>をクリアする必要があります。 .newdiv6にclear: both;を使用してください：

は

.newdiv2, 
 
.newdiv3, 
 
.newdiv4, 
 
.newdiv5 { 
 
    width: 25px; 
 
    height: 25px; 
 
    margin-bottom: 5px; 
 
    border: 3px solid black; 
 
} 
 
.newdiv6 { 
 
    width: 150px; 
 
    height: 150px; 
 
    border: 3px solid black; 
 
    clear: both; 
 
} 
 
.newdiv { 
 
    height: 250px; 
 
    width: 450px; 
 
    float: left; 
 
    border: 3px solid black; 
 
} 
 
.divwrapper { 
 
    float: left; 
 
    border: 3px solid blue; 
 
} 
 
.mainwrapper { 
 
    display: block; 
 
}

<div class="mainwrapper"> 
 
    <div class="newdiv"></div> 
 
    <div class="divwrapper"> 
 
    <div class="newdiv2"></div> 
 
    <div class="newdiv3"></div> 
 
    <div class="newdiv4"></div> 
 
    <div class="newdiv5"></div> 
 
    </div> 
 
</div> 
 
<div class="newdiv6"></div>

また、数字の後にpxを使用し、そうでなければ動作しません。

プレビュー