1

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

float: left;
margin-left: 20px;

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

注意，当浏览器窗口最大化和最小化时，每行中的第一个 img 会发生变化

是否可以？

4

2 回答 2

3

当然，只需给每个图像的左边距为 20 像素，它们所在的容器的左边距为 -20 像素。

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

这样，容器左侧的每个 img 都将具有 0 的有效边距。

jsfiddle

于 2013-06-15T06:42:25.113 回答
0

如果图像不在每行一个 div 中，那么您必须使用 JavaScript。我试过用 jQuery 来做这件事，除了一个问题，它工作得很好。我没有得到正确的价值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 回答