2013年4月13日土曜日

サムネイル(グリッド)を並べた時に同じCSSでぴったり収める方法

215pxサムネイルを4つ20pxの間隔で配置したい場合最後のサムネイルにかかったmargin-right:20px;が邪魔になります。そこで最後のマージン20pxを吸収します。

サムネイル4つを収めたい横幅は920px、しかし上記の状態だと940pxの幅必要です。それをサムネイルの親要素の幅を940pxとして20px多くしますがmargin-right:-20px;で20pxを相殺することで。215pxサムネイルを×4個、20pxの間隔で配置したい時に920pxでピッタリ収まります。


<!--親要素-->
#colum{
width:940px;
margin-right:-20px;
_overflow:hidden;
}


<!--サムネイル-->
.thumbnail{
width:215px;
float:left;
padding-right:20px;
}


0 件のコメント: