css - 柔軟なdivは、ギャップなしで水平および垂直に配置されます

Question

コンテナの幅に応じて同じ幅と異なる高さで、divを水平方向と垂直方向に動的に配置したいと思います。

私はそれらを次のように積み重ねたい

| 1 | 2 |

| 3 | 4 |

| 5 |

問題は、div間に白いギャップがあることです。左側にクリアな1位と5位を追加しても

まだギャップがあります。

cssでそれを達成することは可能ですか？

EDIT:

コンテナの幅が変わる可能性があります（つまり、ユーザーが境界線をドラッグした場合）。次に、内部のdivは、内部のスペース全体を占めるように正しく整列する必要があります。以下の可能な結果：

| 1 |

| 2 |

| 3 |

| 4 |

| 5 |

また

| 1 | 2 | 3 |

| 4 | 5 |

また

| 1 | 2 | 3 | 4 |

| 5 |

また

| 1 | 2 | 3 | 4 | 5 |

score 1 · Accepted Answer

これを試してください：クラス列を作成し、その中にコンテンツを含む列があります。あなたが必要とするものではないかもしれませんが、それはうまくいくでしょう...

score 1 · Accepted Answer

CSS のみを使用する場合は、2 つの列を設定するのが最適だと思います。最初の列に 1、3、5 を入力し、2 番目の列に 2 と 4 を入力します。そうすれば、空白はなくなります。

編集: これらの div を空白なしでスタックし、柔軟なレイアウトを維持したい場合は、CSS だけでは実行できませんが、Isotopeを使用すると、非常に使いやすい jQuery プラグインを試すことができます。

2 に答える 2