html - 別のdiv内にあるときに左にフロートするdivを取得する

Question

http://codepen.io/anon/pen/BFjCE

この例の下部にある div を大きな div の右側に配置しようとしています。どちらも左に浮かんでいますが、2 番目の div は大きい方の隣に配置されません。

私はそれがサイジングに関係していると推測しています。

この画像は私が何を意味するかを示しています

Answer 1

さて、あなたはすでに質問に答えました。サイズはdiv重要です。隣接する div のサイズの合計が、それらを含むボックスの使用可能な幅を超える場合、カスケード ダウンします。それでも同じ行に入れたい場合は、与える必要がありますoverflow-x

Answer 2

あなたが抱えている問題は、幅にパディングがあるため、実際には 2 つの幅が 100% のページ幅を超えていることです。パディングはセクションに指定した幅に含まれていない60%ため40%、フロートは 100% を超えており、2 番目の要素は押し下げられています。

.grid-1-2CSSを 60% から 50% に変更して終了編集を行ったところ、問題は解決しました。

.grid-1-2 {
    width: 50%;
}