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

【问题标题】：Is it with CSS possible to target the first img in each line?是否可以使用 CSS 定位每行中的第一个 img？
【发布时间】：2013-06-15 15:25:54
【问题描述】：

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

float: left;
margin-left: 20px;

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

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

有可能吗？

【问题讨论】：

什么是“线”？你能发布你的 HTML 吗？
需要更多上下文，图像是否在任何包装器中？
Removing margin on inline-block element after wrapping lines 的可能重复项
您的图片是否具有相同的固定宽度？如果是，则可以只使用 CSS，即使它们都在同一个容器中。编辑好吧，我又读了一遍这个问题，这比我最初想象的要容易得多，并且对于不同大小的图像非常可行：将图像容器放在包装器中并在容器上设置margin-left成为-20px。
感谢您的帮助。我使用了在 img 容器上放置负左边距的方法。我也考虑过这种方法，但一直认为这是一种 hack。 But it seems to be valid CSS

标签： css css-float css-selectors

【解决方案1】：

当然，只要给每个图像一个 20px 的左边距，以及它们所在的容器 -20px 的左边距。

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

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

jsfiddle

【讨论】：

通过这样做，我们实际上改变了整个布局，并将其拖动到浏览器窗口左侧-20px。（抱歉不喜欢这种方法）
@wakqasahmed：您可以随心所欲地投票，但仅仅因为您“不喜欢”而对竞争性答案投反对票似乎很不合理，不是吗？
你可以添加一个新的容器，这样布局就不会改变；而不是<div class="mylayout"><img1><img2></div> 写<div class="mylayout"><div class="container"><img1><img2></div></div>。由于图像有边距校正，因此不会向左拖动任何内容。
感谢您的帮助。我使用了在 img 容器上放置负左边距的方法。我也考虑过这种方法，但一直认为这是一种 hack。但它似乎是有效的 CSS coding.smashingmagazine.com/2009/07/27/…

【解决方案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

【讨论】：

嘿 Sourabh：感谢您的帮助。我使用 CSS 方法在 img-container 上放置负左边距。