Question

是否可以使用CSS来定位每行中的第一个img。 img元素具有以下属性：

float: left;
margin-left: 20px;

我想在每行的第一个img上将margin-left设置为0。

请注意，当浏览器窗口最大化并最小化时，每行中的第一个img将会改变

有可能吗？

Answer 1

当然，只需给每个图像留出20px的左边距，然后将容器放在-20px的左边距内。

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

这样，容器左侧的每个img的有效边距都为0.

jsfiddle

Answer 2

如果图像不是每行div，则必须使用JavaScript。我尝试用jQuery做这个，它除了一个问题外它工作得很好。我没有得到imgPerLine

的正确值

FIDDLE

修改

将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

是否可以使用CSS来定位每行中的第一个img？

2 个答案:

修改