これが私の奇妙な要件なのかどうかはわかりませんが、これまでに尋ねた人はいませんでした。私の問題は次のとおりです。
ランダムな高さの div が複数の行にフローティングされている場合、前の数値より下に留まらないのはなぜですか。私が気づいたのは、次の行の div が、上の行の高さが低い div の下にあることです。これにより、2行目に空白ができ、他の後続のdivが次の行に分類されます。ここにフィドラーのリンクを追加しましたjsfiddle.net/GF9kE
この画像は、私が言いたいことを正確に説明しています。div 4 は 1 より下に、5 は 2 より下に、6 は 3 より下にあるはずです。なぜこれが起こるのですか？そして、これに対する修正はありますか？div をフローティング スタイルで表示したいのですが、高さに関係なく順序に従います。
これを読んで私を助けてくれてありがとう。
ありがとうございました、
このトピックについて書かれた優れた説明がここにあります。
http://designshack.net/articles/css/everything-you-never-knew-about-css-floats/
あなたの質問に対処する特定の抜粋：
「基本的に、状況の要点は、フロート要素が指定されたエッジ (左または右) まで右に移動することですが、それ以上はありません。もちろん、その前に別のフロート要素がある場合を除き、その場合、その要素の隣に移動します。 .
前に私たちを混乱させた本当の驚きは、最後のルールにあります。フローティング要素はできるだけ高くとどまろうとし、この垂直方向の配置ルールは、アイテムを端に押し付ける水平方向の左右のフローティング ルールよりも優先されると述べています。 ."
短い答え - ボックス #2 は行の高さを #3 の高さよりも大きくするため、#4 は次の行が始まる前に押し込む余地があります。#8 と #9 にも同様のロジックが適用されます。
- - 編集 - -
ボックスを Pinterest スタイルでフローさせたい場合は、Masonry や Blocksit などの既存の JavaScript ライブラリを使用することをお勧めします。
JavaScript を使用せずに CSS3 のみを使用したい場合は、次のリンクを参照してください。これは、ブラウザーの互換性がどの程度必要かによって、ニーズに合う場合があります。
こちらをご覧ください: http://isotope.metafizzy.co/ 彼らは、CSS だけではこれを行うことができないと言いました。こちらを参照してくださいCSS Floating Divs At Variable Heights