写真を表示しようとしています。それらの全ては同じ幅であるが、異なる高さを有する。すべての絵のクラス名は、私はfloatを指定したスタイルシートでPICCSS：フローティング時にdivsの高さを無視する
<img class = "pic" src = .... />
ある
： は、私のような何かをしようとしている左属性：
.pic{
float:left
}
終わりを結果は、すべての行が前の行から最も高いdivの後に垂直に整列されている間に期待されるものではありません。
純粋なクロスブラウザのCSSで私の問題を解決する方法はありますか？
CSS3 column-countで余分なマークアップを付けずに、少なくとも1つの要素が含まれていることが前提です。
デモ：
HTML：
<div id="container">
<img class="image" src="http://farm1.staticflickr.com/205/494701000_744cc3a83a_z.jpg" />
<img class="image" src="http://farm5.staticflickr.com/4028/4287569889_f6a4fca31b_z.jpg" />
<img class="image" src="http://farm3.staticflickr.com/2340/2421926504_d8509d0a98_z.jpg" />
<img class="image" src="http://farm1.staticflickr.com/197/503792921_fedf8ba47e_z.jpg" />
<img class="image" src="http://farm2.staticflickr.com/1153/741035029_f394e11a1f_z.jpg" />
<img class="image" src="http://farm7.staticflickr.com/6213/6243090894_8b8dd862cd_z.jpg" />
<img class="image" src="http://farm2.staticflickr.com/1339/1157653249_dbcc93c158_z.jpg?zz=1" />
<img class="image" src="http://farm3.staticflickr.com/2570/4220856234_029e5b8348_z.jpg?zz=1" />
</div>
はCSS：
#container {
column-count: 3;
column-fill: balance;
column-gap: 10px;
width: 330px;
}
.image {
display: block;
margin-bottom: 10px;
width: 100px;
}
出力：
素晴らしい！これの唯一の欠点は、すべての画像の高さを知り、指定する必要があることです。 – Ionut
@ lonutいいえ、私はちょうどイメージの高さを与えるデモでそれをしました。それは必要はありません。 – ThinkingStiff
@ lonut私はいくつかの実際の画像でそれを更新し、高さを削除しました。 – ThinkingStiff
悲しいことに、あなたはCSS2/3でこれを行うことはできません。
は、float: top;をエミュレートする非常に小さなスクリプトで、うまく動作します。jQuery Masonryです。
余分なマークアップを追加できますか？
はい、あなたは浮動divを持つ3列作ることができた場合：
<div class="column">
<img src="1.jpg" />
<img src="4.jpg" />
</div>
<div class="column">
<img src="2.jpg" />
<img src="5.jpg" />
</div>
<div class="column">
<img src="3.jpg" />
<img src="6.jpg" />
</div>
それとも、あなたのためにそれを行うにはjQueryを使用します。
これは優れた試験ですどのように質問を書くか。 –