CSS3/jQueryのnth-child()を利用したカラムレイアウト | A Day in the LifeDecember 15, 2010 商品リストなんかを掲載する場合、ボックスを3カラム/4カラムにレイアウトするケースが多々あると思います。今は3商品しか掲載しないけれど、そのうち4、5、6...と増えていってもレイアウトを維持するためには少々工夫する必要があると思います。 当然のごとくボックス間にはマージンが存在していて、カラムの最後のボックスのマージンが邪魔...とは言えマージンを0にしたクラスを付加するのもメンテナンス性が落ちるため出来れば避けたい。 ul/li要素でマークアップしてpositionを利用する方法やネガティブマージンを利用する方法があると思います。今回はul/li要素を利用せずにシンプルにdivのみを利用した方法を紹介します。マークアップは次の通り。 <div class="item-box pkg"> <h2>Items Box</h2> <div> <div cl
