等間隔の列 ( ol
) をいくつか作成しようとしていますが、列自体は固定幅です。
これまでのところ、table
レイアウトを使用し、リスト項目内に追加の要素をネストすることで、目的の効果を達成することができました。
HTML:
<ol>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
</ol>
CSS:
ol {
display: table;
width: 100%;
}
li {
display: table-cell;
}
div {
margin: 0 auto;
width: 100px;
height: 250px;
}
これはうまく機能しますが、次の 2 つの欠点があります。
- demo でわかるように、最初と最後の列は、親の外縁と同じ高さに並んでいません。
- これは実際にはレスポンシブに使用できません。小さい幅でできる唯一のことはそれらを積み重ねることですが、それらを分割したいと思います(1行あたり2または3)。
CSSだけでも可能ですか?JS でこれを実現する方法がたくさんあることは知っていますが、私は CSS のみのソリューションを求めています。
PS IE7 は気にしませんが、IE8 をサポートする必要があります。とにかくプロジェクトで使用しているので、CSS3セレクターは問題ありませんselectivizr
(私はそれがJSであることを知っています;-))。