レスポンシブに使える可変の箱型リストを考えてみました

レスポンシブ対応のウェブサイトで、可変の箱型リストを実装するのが少し大変でした。
(タイトル画像のようなものです)
flexboxが使えると一番良いのですが、すべてのブラウザに対応していないので、
レスポンシブ対応のウェブサイトでは使えません。
そうなると、横並びにした要素をパーセンテージで指定するのが良さそうです。
ただし、パーセンテージの計算にちょっとコツが必要だったので記載しておきます。
デモページも作成しましたので、あわせてご覧ください。
レイアウトその1
まずは、このようなレイアウトの場合。

画像やテキスト情報が格納されたボックスが並び、
ボックスの端を、親のdivの横幅にあわせます。
実装イメージ
親divの横幅よりも大きな子要素(この場合はul)を作って、
ネガティブマージンで中央寄せにしています。
画像やテキスト情報が格納されたボックス(この場合はli)には
パーセンテージでマージンを取っています。

HTML
<div class="listBox_001"> <ul> <li><img src="img/img_001.jpg" width="100" height="100"></li> <li><img src="img/img_001.jpg" width="100" height="100"></li> <li><img src="img/img_001.jpg" width="100" height="100"></li> <li><img src="img/img_001.jpg" width="100" height="100"></li> <li><img src="img/img_001.jpg" width="100" height="100"></li> <li><img src="img/img_001.jpg" width="100" height="100"></li> <li><img src="img/img_001.jpg" width="100" height="100"></li> </ul> </div>
CSS
.listBox_001{ width: 90%; /* 任意の数値を */ margin:0 auto; } .listBox_001 ul{ width: 101.4%; margin: 0 0 0 -0.61%; } .listBox_001 li{ display: inline-block; width: 32%; margin:0 0.65% 10px 0.65%; text-align: center; } .listBox_001 li img{ width: 80%; /* 任意の数値を */ height: auto; }
レイアウトその2
先ほどは、画像やテキスト情報が格納されたボックスの端を
親divの横幅にあわせましたが、
今度は、ボックス(li)の中の画像の端を、親divの横幅にあわせる場合。

実装イメージ
ulにはネガティブマージンを指定し、liの横幅を33.3333%としマージンは0にします。

HTMLはほぼ同じなので、CSSだけ
.listBox_002{ width: 90%; margin:0 auto; } .listBox_002 ul{ font-size: 0; width: 107%; margin: 0 0 0 -3.5%; } .listBox_002 li{ display: inline-block; width: 33.3333%; margin:0 0 10px 0; text-align: center; } .listBox_002 li img{ width: 80%; height: auto; }
以上です
「レイアウト2」で、画像のwidth:80%を変更した場合
各marginの値が変わってきますので計算をして実装してみてください。
ただし、計算通りにパーセント指定をするだけではうまくいかないので、
画面を見ながらマージンの調整が必要になります。
もっと上手な実装方法があれば、ぜひぜひ教えてください!