css - CSS-空のスペースをフローティングdivで自動的に埋める

Question

http://www.gablabelle.com/でグリッドレイアウトを作成しようとしています。

float：left;を使用した複数のdiv（画像）があります。プロパティと私はなぜいくつかの空のスペースがあるのか​​、そしてなぜフローティングdivがギャップを埋めていないのか疑問に思います。

あなたの時間と助けに感謝します。

更新：私は現在jQueryアイソトープを使用していますが、まだギャップがあります...何か考えはありますか？

Answer 1

それがフローティングの仕組みです。これらのギャップは、要素が次々と新しい行にブレークするために浮かぶために存在します。上のスペースは埋められません。

不均一なグリッド効果が必要な場合は、絶対位置を設定するjavascriptソリューションを使用する必要があります。組積造プラグインをお勧めします。ホームページの前後の例は、あなたが抱えている問題とあなたが望む解決策を示していると思います。

Answer 2

ページ上のすべての四角を埋める方法を探しているようです。これは、CSSだけでは不可能です。'フロート：左;' ページ内のスペースを画像ごとに埋めるだけで、すべてがどのように組み合わされるかを考慮していません。

心地よく座り、ジグソーパズルのようにすべての部品を組み合わせるのは簡単ではありません。これは実際には非常に複雑な問題であり、ナップサック問題（http://en.wikipedia.org/wiki/Knapsack_problem）とパッキング問題（http://en.wikipedia.org/wiki/Packing_problem）に関連しています。 。

これを解決するために、jQueryまたはJavaScript（またはおそらくPHP）ライブラリを使用できると確信しています。または、写真がきちんと収まるように手動で注文することもできます。

幸運を！

Answer 3

これがギャップの原因です。

article.post {
    margin: 0 0 30px 30px;
}