1

CSS で各行の最初の img をターゲットにすることは可能ですか。img 要素には次のプロパティがあります。

float: left;
margin-left: 20px;

各行の最初の img で margin-left を 0 に設定したいと思います。

ブラウザ ウィンドウが最大化および最小化されると、各行の最初の img が変更されることに注意してください。

出来ますか？

4

2 に答える 2

3

もちろん、各画像に 20px の左余白を与え、コンテナーに -20px の左余白を与えるだけです。

.container {margin-left:-20px}
.container img {margin-left:20px; float:left}

そうすれば、コンテナの左側にあるすべての img の実効マージンは 0 になります。

jsfiddle

于 2013-06-15T06:42:25.113 に答える
0

画像が行ごとに div に含まれていない場合は、JavaScript を使用する必要があります。jQueryでこれをやってみましたが、1つの問題を除いてうまくいきます。の正しい値が得られませんimgPerLine

フィドル

編集

に変更var imgWidth = $img.eq(0).outerWidth();するvar imgWidth = $img.eq(0).outerWidth(true);と、少しうまく機能します。

jQuery

var $img = $('img');
var imgWidth = $img.eq(0).outerWidth();
var totalImgs = $img.length;
$(window).on('resize', function() {
    var windowWidth = window.innerWidth;
    var imgPerLine = Math.floor(windowWidth/imgWidth);
    console.log('imgPerLine:'+imgPerLine);

    $img.each(function () {
        $(this).css('margin-left', '10px');
    });

    for (var i = 0; i < totalImgs - 1; i++) {
        if (i % (imgPerLine) === 0) {
            $img.eq(i).css('margin-left', '0px');
        }
    }
});

CSS

body {
    margin: 0;
}
img {
    float: left;
    width: 200px;
    margin: 10px;
}

HTML

<img src="http://goo.gl/UEZSH"> * 8
于 2013-06-15T07:09:07.347 に答える