0

ブロックがたくさんあるので、表のように並べたい。問題は、最後のマージンが右にあるため、私が望んでいる方法に実際には適合しないことです。この例を参照してください。1 行に 4 つのブロックを配置したいのですが、どうすれば実現できますか?

CSS:

.box {
    width: 500px;
    height: 10000px;
}

.block {
    float: left;
    width: 100px;
    height: 100px;
    margin-right: 30px;
    background-color: #0f0;
    margin-bottom: 50px;
}
4

3 に答える 3

0

各行の最後のブロック (例: .last) の新しいクラスを作成margin-right:0し、そのクラスを作成できます。

HTML:

<div class="box">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block last"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block last"></div>
</div>

CSS:

.last { margin-right: 0; }

JS フィドルの例

于 2013-02-11T20:53:49.957 に答える
0

last-child次のように CSS セレクターを使用します: http://jsfiddle.net/QwGV5/1/

.block:last-child {margin-right: 0;}

互換性について: http://caniuse.com/css-sel3

于 2013-02-11T20:54:55.930 に答える
0 
div:last-child {
    margin-right: 0;
}

しかし、これは IE9+ でしか動作しません (おそらく 8、覚えていません)。

それ以外の場合は、最後のクラスにクラスを配置します。

これがフィドルの更新ですhttp://jsfiddle.net/QwGV5/2/

あなたがやりたいことは、実際には4番目のdivごとに必要だと思います。だからあなたが使うことができますnth-child

.box div:nth-child(4n) {
  margin-right: 0;   
}

例: http://jsfiddle.net/QwGV5/4/

于 2013-02-11T20:55:55.727 に答える