2

div ブロックのリストを、高さが異なる 2 列で並べて、互いに浮かせようとしています。すべてのブロックのサイズが固定されている場合、それらは自然に互いにきれいに積み重ねられますが、これにはさまざまな高さが含まれるため、背の高いブロックの場合、次のブロックに進む前に、隣接するブロックの下に多くの空白スペースができます.

ただし、これは片側でのみ発生することに気付きました。ブロックが左に浮いている場合、右側の列のブロックが空白を自動的に埋めます。逆の場合も同様です。

しかし、私は現在、両側の流動性を達成するための解決策を模索しようとしています.

ここで私が意味することの例を見ることができます。

2 列目のすべてがうまく収まっていますが、左側には背の高いサイズの空白スペースがたくさんあります。

CSS は次のようになります。

.container {
    width: 600px;
}
.item {
    width: 250px;
    height:  auto;
    background: darkgray;
    border: 1px solid black;
    float: left;
    margin: 5px 0 0 5px;
    padding: 5px;
}
4

1 に答える 1

1

欠点がある 3 つのオプションがあります。

  1. 各項目の開始位置を計算し、相対位置を使用してそれぞれを再配置する JavaScript ソリューションを記述します。

  2. 反対側のフロートである 2 つのコンテナー列が存在するように、マークアップを変更します。プログラムで 2 つの間でアイテムを配布する必要があります。

  3. テーブルを使用して、各項目の高さが隣の項目の高さと一致するようにします。

明らかに、最後の 2 つは意味的に適切ではなく、最初の 1 つは項目のリストがどれだけ大きくなるかによっては実用的ではない可能性があります。CSS 3 でそれを行う方法があると思いますが、現時点ではブラウザのサポートがありません。

于 2009-09-03T01:54:09.273 に答える