css - 混乱を浮かべる

Question

このフィドルのオレンジ色のボックスが残りのボックスと一緒に左に浮いていないのはなぜですか? オレンジ色のボックスが流れから取り出され、青いボックスの隣に浮いていると確信していました。私は何が欠けていますか？

  <div class=" wrap clear">
        <div class="block pink float"></div>
        <div class="block blue float"></div>
        <div class="block green"></div>
        <div class="block orange float"></div>
    </div>

score 1 · Accepted Answer

働くフィドル

divデフォルトでは、他の要素を並べてブロックしますが、この動作は CSS を使用して変更できます。オレンジ色のボックスと青色のボックスが必要な場合は、配置を変更できます。したがって、緑色の div はそのオレンジ色の div をプッシュできません。緑の div の後に配置される div は次の行になります。

score 0 · Accepted Answer

すべてのブロックレベル要素は独自の行に配置され、他の要素がそれらの左右に配置されることはありません。要素はフロートされ、ブロックレベルと見なされますが、通常のページフローから削除され、独自の行に配置されなくなりました。フローティング要素の隣にブロックレベル要素を配置するための簡単な解決策は、次の CSS ルールを目的の要素に追加することです。

.Whatever {
    display: inline-block;
}

score 0 · Accepted Answer

このLive Demoのような HTML コードに置き換えてください --------- Full Demo

 <div class=" wrap clear">
            <div class="block pink float"></div>
            <div class="block blue float"></div>

            <div class="block orange float"></div>

     <div class="block green"></div>
        </div>

デモ

score 0 · Accepted Answer

It's because you aren't floating the green box. So the green box is displaying block level and pushing down the orange box.

css - 混乱を浮かべる

4 に答える 4

Related

Reference