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

Question

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

调整

大小和调整效果很好，但我不知道如何在那里找到间隙。

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

Answer 1

您还需要向我们展示您在此类问题上的 CSS 和 HTML 标记，以便我们轻松找到冲突或错误。display的差异，设置float或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});

这是小提琴