[CSS]スクリプト無しで、高さがバラバラの画像を隙間無く配置するスタイルシートのテクニック | コリス

ブラウザのサイズを変更してもそれに合わせて、高さがバラバラの画像をグリッドに沿って隙間無く配置するスタイルシートのテクニックを紹介します。 Seamless Responsive Photo Grid デモページ [ad#ad-2] 下記は各ポイントを意訳したものです。 画像を隙間無く配置する実装方法 HTML HTMLはimg要素をsection要素で内包したシンプルなものです。 <section id="photos"> <img src="images/dog-1.jpg" alt="Little doggie"> <img src="images/cat-1.jpg" alt="Little kittie"> ... </section> CSSをオフにすると、img要素はinline-blockなので、下記のように連続して並ぶだけです。 デモページ：CSSオフの表示 こういったエ

[primarytext]

IEが・・・w

[kzms2]

画像を敷き詰めるCSS

[kana321]

ブラウザのサイズを変更してもそれに合わせて、高さがバラバラの画像をグリッドに沿って隙間無く配置するスタイルシートのテクニックを紹介

[hattoushinha]

面白いね

[yamadar]

カラムを設定し、各カラムの幅いっぱいに画像の幅を設定する。ついでにメディアクエリで、ブラウザの幅に応じてカラム数を変更してあげる。

[site159]

ふぅ〜ん

[s5-style]

CSS3 column-gapを利用してカラムレイアウトを構築する例

[kkeisuke]

column-gap

[choromo]

#mybm [CSS]スクリプト無しで、高さがバラバラの画像を隙間無く配置するスタイルシートのテクニック | コリス: ブラウザのサイズを変更してもそれに合わせて、高さがバラバラの画像をグリッドに沿って隙間無く配置するス

[sometk]

これは使えるかも

[uzumaki_rocket]

[][

[north_god]

スクリプト無しで、高さがバラバラの画像を隙間無く配置するスタイルシートのテクニック

[sinfd]

こんなの探してました。ありがとうございます。

[asuka0801]

これはいいね。※但しIEでは以下略

[tarotarorg]

後読め

[enst_jp]

column-count

[otchy210]

なるほど！カラムレイアウト使うのか。ただこれ、キャプチャ画像では隠れてるけど、下端はガタガタになるよね。

[nors]

http://css-tricks.com/13372-seamless-responsive-photo-grid/

[sho]

column-countを使うテク。IE9ですら対象外ってことは、事実上使えないってことだが。

[warriorking]

(CSS)スクリプト無しで、高さがバラバラの画像を隙間無く配置するスタイルシートのテクニック | コリス

[webmugi]

columnプロパティを使う。写真幅をカラム幅に合わせてリサイズして縦に並べる。なるほど。

[machupicchubeta]

css image tile placement

[littlefield]

対応ブラウザいいねｗ

[tsuki-rs]

おぉ！かなり便利なテクニック！！だけど、対応ブラウザが・・・

[Donca]

✔ [CSS]スクリプト無しで、高さがバラバラの画像を隙間無く配置するスタイルシートのテクニック

[hr07jp]

高さがバラバラの画像を隙間無く配置するCSS（IE×）