タイトルや説明つきの画像をタイル状に並べる方法についての考察

最終更新日:2016-05-11

例えば、以下のような、タイトル付きの画像をタイル状に並べるとき、

fgsgsfgsd

rect3015

sfgsdgfsgf

私は「display:inline-block;vertical-align:top;」という CSS をよく使います。

sfgsgsdf

WordPress.com テーマ一覧」も同じような感じで作っています。

sfgsfgsfgs
WordPress.com テーマ一覧

ちなみに、使っている CSS は、

/* サムネイル画像をタイル状に並べる */
ul.boxline {
padding-left: 0!important;
text-align: left;
margin: 0 0 15px;
}

ul.boxline li {
width: 76px;
display: inline-block;
vertical-align: top;
white-space: normal;
word-wrap: normal;
font-size: 12px;
line-height: 1.2;
margin: 0;
padding: 2px;
}

ul.boxline li img {
display: block!important;
border: 1px solid #d0a600!important;
height: 55px!important;
width: 72px!important;
margin: 2px!important;
padding: 2px!important;
}

記事での記述はこんな感じです。 

たとえば、上のケースで「display: block;float:left;」を使うと、以下のような感じになります。下のほうのでこぼこにつっかえて、次の行の先頭が左端まで行かなくなっている、といった感じでしょうか?

sfdgsfgdsf

「display:inline;」にすると縦一列に並んでしまいます(mac の safari。ie 旧バージョンでの話は省略。)。

dasgsdfgsf

「display:inline-table」というのを使うと、文字が重ならないようにうまいこと避けてくれていますが、その分、配列が崩れてしまっています。

fgsdfgsgfds

他にもいろいろとやり方はありそうな気がするのですが、私がよく使っているのはこれくらいです。

以上、タイトルや説明つきの画像をタイル状に並べる方法についての考察でした。

参考

 

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。