jquery - 在父 div 中均匀分布有间隙的元素并自动更改它们的宽度

Question

问题：Div 是 850px 并且具有可变数量的子元素（链接元素中的图像）。我希望他们自动更改宽度，以便他们填写父 div，它们之间有 10px 宽的间隙。此外，它们应该在父母中是合理的，并且第一个和最后一个孩子应该分别在左侧和右侧没有间隙。

调整大小和拟合效果很好，但我不知道如何在其中找到间隙。

    $(".products a img").width($("#products_div").width() / $(".products a img").length);

Answer 1

您还需要向我们展示您针对此类问题的 CSS 和 HTML 标记，以便我们轻松定位冲突或错误。display, 设置 afloat或的差异margin可能会产生与您想要做的不同的结果。

我相信这是你的标记：

<div id="products_div" class="products">
    <a><img src="..."/></a>
    <a><img src="..."/></a>
    <a><img src="..."/></a>
    <a><img src="..."/></a>
    <a><img src="..."/></a>
    <a><img src="..."/></a>        
</div>

您的 CSS 将是：

#products_div { width:850px;}
.products a img{ float:left; }

这就是使用 js/jquery 解决图像宽度和间隙的方法：

var gap = 10;

var imgWidth = ($("#products_div").width() + gap) / $(".products a img").length;

$(".products a img").width(imgWidth - gap).css({'margin-right':gap}).last().css({'margin-right':0});

这是小提琴