2

私はこの問題に頻繁に遭遇し、通常、問題に対処するために余分な時間を費やすことになります。基本的には、次のような単純なレイアウトです。

HTML:

<div id="container">
  <div id="items">
    <div class="item">
      (data here)
    </div>
    <div class="item">
      (data here)
    </div>
    <div class="item">
      (data here)
    </div>
    <div class="item">
      (data here)
    </div>
    -- repeats --
  </div>
</div> <-- end container -->

CSS

#container {
  margin: 0 auto;
  width: 980px;
  overflow: hidden;
}
#items {
  float: left;
  width: 980px;
  min-height: 1000px;
}
#items .item {
  float: left;
  width: 230px;
  height: 230px;
  margin-right: 20px;
  margin-bottom: 20px;
}

私の意図した結果は、アイテムを表示する 4 x 4 グリッドを持つことです。上記の CSS からわかるように、スペースを空けるために、各項目に右マージンを追加しています。これに関する唯一の問題は、各行の 4 番目の項目が次の行にドロップダウンすることです (これは明らかに、項目の右マージンが原因で発生しています)。

(230 x 4) = 920 + (20 x 4) = 80 = 1000 (ただし、コンテナーの幅は 980)。したがって、各行に 4 つの項目ではなく、3 つの項目が表示されます。

4 つおきの項目の右マージンが含まれていない場合、4 つの項目すべてが親 DIV の制約内に完全に収まります。4 番目のアイテムに別のクラスを追加し、右マージンを 0px に設定するだけでよいことはわかっていますが、これは、製品を動的に表示するときに、スクリプトに追加のチェックを追加する必要があることを意味します。

理想的には、すべての主要なブラウザーと IE7 でうまく機能する純粋な CSS ソリューションが必要です。誰か知っていますか？

4

2 に答える 2

1

に固定幅ではなくパーセンテージを使用してみてくださいitems。

#items .item {
    float: left;
    width: 23%;
    height: 230px;
    margin-right: 2%;
    margin-bottom: 20px;
}

フィドル： http： //jsfiddle.net/kboucher/Mv7sh/

于 2012-10-17T21:07:49.127 に答える
0

要素の 4 番目ごとの子をターゲットにするには、 を使用できますが:nth-child(x)、これは IE8 以前ではサポートされていません。w3schools ドキュメント

:last-child4つのグループごとにラップする必要があるため、実際にはできません。

ただし、デザインによっては、幅と高さを230ではなく225にすると、余白が980で均等になります。

また、margin-right のみを使用する特別な理由がない限り、それを10の値でmargin-rightとに分割できます。margin-left

于 2012-10-17T21:11:15.210 に答える