2

等間隔の列 ( 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 つの欠点があります。

  1. demo でわかるように、最初と最後の列は、親の外縁と同じ高さに並んでいません。
  2. これは実際にはレスポンシブに使用できません。小さい幅でできる唯一のことはそれらを積み重ねることですが、それらを分割したいと思います（1行あたり2または3）。

CSSだけでも可能ですか？JS でこれを実現する方法がたくさんあることは知っていますが、私は CSS のみのソリューションを求めています。

PS IE7 は気にしませんが、IE8 をサポートする必要があります。とにかくプロジェクトで使用しているので、CSS3セレクターは問題ありませんselectivizr（私はそれがJSであることを知っています;-)）。

4

2 に答える 2

2

「水平メニューを*本当に*正当化する方法」をリサイクルするのが適切だと思われます。基本的に、あなたが説明している動作は、text-align:justify適用された同じ幅のインラインブロック要素の動作です:

ol {
  /*force the desired behaviour*/
  text-align: justify;
  /*remove the minimum gap between columns caused by whitespace*/
  font-size: 0;
}

li {
  /*make text-align property applicable*/
  display: inline;
}

/*force "justify" alignment that requires text to be at least over 2 lines*/
ol:after {
  content: "";
  display: inline-block;
  position: relative;
  width: 100%;
  height: 0;
}

div {
  display: inline-block;
  width: 100px;
  height: 250px;
}

ワーキングフィドル。

注意:font-size使用しているリセットに応じて、必要なおよびtext-align子孫に再適用する必要がある場合がありolます (つまり、これらのプロパティが継承されないようにするため)。

于 2012-10-02T10:27:47.927 に答える
0

私の最初の考えは、メディアクエリを使用して、さまざまな画面サイズで行ごとに表示したい数に対する応答性の高いアプローチを得ることであり、2番目に使用することです

     box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;

これにより、後でボックスモデルのサイズに追加する可能性のあるパディングが停止します。

これがあなたが求めているものに近いことを願っています。

于 2012-10-01T13:03:06.860 に答える