最終更新日：2016-05-11
例えば、以下のような、タイトル付きの画像をタイル状に並べるとき、
私は「display:inline-block;vertical-align:top;」という CSS をよく使います。
「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;」を使うと、以下のような感じになります。下のほうのでこぼこにつっかえて、次の行の先頭が左端まで行かなくなっている、といった感じでしょうか？
「display:inline;」にすると縦一列に並んでしまいます（mac の safari。ie 旧バージョンでの話は省略。）。
「display:inline-table」というのを使うと、文字が重ならないようにうまいこと避けてくれていますが、その分、配列が崩れてしまっています。
他にもいろいろとやり方はありそうな気がするのですが、私がよく使っているのはこれくらいです。
以上、タイトルや説明つきの画像をタイル状に並べる方法についての考察でした。
