画像を16個並べた状態で、綺麗に伸縮するソースを書くのに手こずったのでメモメモ。
結局tableが一番美しいな。あんまりレイアウトに使うの良くないのだけど。
cssのdisplay:tableうんちゃら;でもいいのかもしれないが、html5のブロック要素まわりの改変がまだよくわからないので、避けておいている。
<div class="div_Wrap clearfix"> <table id="photoAllWrap" cellpadding="0" cellspacing="0"> <tr> <td><a href="#"><img src="img/dummy02.gif" alt=""></a></td> <td><a href="#"><img src="img/dummy02.gif" alt=""></a></td> <td><a href="#"><img src="img/dummy02.gif" alt=""></a></td> <td><a href="#"><img src="img/dummy02.gif" alt=""></a></td> </tr> <tr> <td><a href="#"><img src="img/dummy02.gif" alt=""></a></td> <td><a href="#"><img src="img/dummy02.gif" alt=""></a></td> <td><a href="#"><img src="img/dummy02.gif" alt=""></a></td> <td><a href="#"><img src="img/dummy02.gif" alt=""></a></td> </tr> <tr> <td><a href="#"><img src="img/dummy02.gif" alt=""></a></td> <td><a href="#"><img src="img/dummy02.gif" alt=""></a></td> <td><a href="#"><img src="img/dummy02.gif" alt=""></a></td> <td><a href="#"><img src="img/dummy02.gif" alt=""></a></td> </tr> <tr> <td><a href="#"><img src="img/dummy02.gif" alt=""></a></td> <td><a href="#"><img src="img/dummy02.gif" alt=""></a></td> <td><a href="#"><img src="img/dummy02.gif" alt=""></a></td> <td><a href="#"><img src="img/dummy02.gif" alt=""></a></td> </tr> </table> </div> #mainWrap .div_Wrap { width:94%; max-width:600px; margin:auto auto 30px auto; } #mainWrap #photoAllWrap { width:94%; margin:auto auto auto; } #mainWrap #photoAllWrap tr td{ width:25%; padding:2px; background-color:#ffffff; } #mainWrap #photoAllWrap img { width:100%; border:2px #999999 solid; }