3

必要に応じて回避策を見つけることもできますが、それは間違っているようで、よりきちんとした方法でコーディングすることを学ぼうとしています。基本的に、3 つの画像を含む div があります。div は 700 ピクセルで、各画像は 220 ピクセルです。つまり、中央の画像の左右に 2 つの 20 ピクセルのギャップがある 660 ピクセルで、外側の画像は最後まで続きます。 div。

画像ごとに個別のIDを設定せずにこれを行うより迅速な方法はありますか?

.contentpictureblock  { float:left; }

.contentpictureblock  img {
margin-right:20px;
}

<div class="contentpictureblock">
<img src="http://...">
<img src="http://...">
<img src="http://...">
    </div>

上記の ^ を実行すると、3 番目の画像が次の行にプッシュされますが、これは理解できます。画像ごとに個別の div を常に作成し、それぞれのマージンを調整できることはわかっていますが、上記に適用できるオーバーフロー タイプのコマンドを 1 つオフにするより速い方法があるのではないかと思っています。これは、右マージンがすべての画像にあることを意味しますが、最後の画像の位置には影響しません。

助けてくれてありがとう。

4

3 に答える 3

1

最後の子セレクターを使用します。

.contentpictureblock img {
    margin-right: 20px;
}
.contentpictureblock img:last-child {
    margin-right: 0;
}
于 2012-09-10T00:35:40.853 に答える
0

div.contentpictureblockの負のマージンもそれを行います。3つ以上の画像が表示される可能性がある場合は、これを実行します。

div.contentpictureblock { margin-left: -20px; overflow: hidden }
于 2012-09-10T02:49:09.960 に答える
0

追加のクラスで最後の画像を変更します。

<img src="..." class="last">

CSS ルール:

.contentpictureblock img.last {
 margin-right: 0;
}
于 2012-09-09T21:39:45.900 に答える