変数サイズ 'wrap'/stick/flowをfloat divにすることは可能ですか？

Question

私はdivブロックのリストを高さの異なる2つの列で整列させようとしています。すべてのブロックのサイズが修正されていれば、それらは自然に互いに積み重ねられますが、これは高さが変化するため、次のブロックに進む前に隣接するブロックの下に空白がたくさんあります。

しかし、これは片側にしか起こらないことに気付きました。ブロックが左にフローティングされている場合は、右の列ブロックが自動的に空白を埋め、逆も同様です。

しかし、私は今、両面の流動性を実現するための解決策を模索しています。

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

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; 
} 

Answer 1

あなたは3つのオプションそれが欠点だ持っているすべてを持っています。

1. が開始位置、各項目を計算し、それに応じて相対 位置を使用して各 いずれかを再配置するJavaScriptソリューションを記述。

2. 2つのコンテナの列が の浮動小数点になるようにマークアップを変更します。あなたは の間で項目をプログラムで配布する必要があります。

3. 各項目の次の高さと一致するように表を使用します。

明らかに、最後の2つは非常に意味的ではなく、最初のものは項目のリストの大きさによっては実用的ではない可能性があります。私はCSS 3でそれを行う方法があると信じていますが、現時点ではブラウザのサポートが欠けています。