html - CSSに浮かぶ「より良い」

Question

CSS と float プロパティを試しています。私はこの「ウェブサイト」を持っており、多くの div が 80px グリッドに配置されていfloat: leftます。

CSS でこのように見えるようにする方法はありますか?そのため、要素はそれらの上に空のスペースを使用できますか?

可能であれば、JavaScript なしで。

ありがとう、マーティン。

Answer 1

いいえ、これはCSSでは実行できません。最善の方法は、私が恐れている石積みと呼ばれるjavascriptアイテムを使用することです。

http://masonry.desandro.com/

Answer 2

動的コンテンツを水平方向と垂直方向の両方に並べて表示する場合、CSS オプションは次のとおりです。

• float:left、すでに見たように、限られた水平タイリングのみを提供します。
• display:inline-blockとは異なる結果float:leftになりますが、タイリングはありません。
• CSS の複数列レイアウトはまだ完全には定義されていません。暗黙的な列への垂直フローをサポートしていますが、おそらくタイリングとしての資格がある方法ではありません。
• フレキシブル ボックス レイアウトはまだ十分にサポートされていません。正しい方向への一歩のように感じられますが、タイリングとは見なされないタイプの水平または垂直フローをサポートします。

要するに、まだ完全に定義されていない CSS 標準でさえ、これをサポートしていないようです。そのため、かなり先になる可能性があります。最も簡単なフォールバック オプションは、jQuery プラグインを使用することです。

Masonryの他に(@Billy Moat が提案したように)、別のいくつかの jQuery プラグインはIsotopeとTiles Galleryです。石積みが最も頻繁に言及されているようです。

Answer 3

px1ブロックのスペースを埋めるために上に行く数が であるとしましょう50px。margin-top: -50px;

それは魔法ではありません。それぞれにそれを行うのは少し手作業です。コンテンツが動的である場合、これは機能しないか、複数の行とすべてで上に行く必要があるかどうかを計算するために js が必要です。

Answer 4

これは可能ですが、CHE が言うように、コンテンツが動的である場合、これは最悪の場合にうまくいきません。

しかし、それが静的サイトであれば、これは確実に実行できます。

これを解決するには、ブロックで考えてグループ化して整列し、各ブロック内ですべてのブロックを再整列します。