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

【问题标题】：Distribute elements with gap between them evenly in parent div and change their width automatically在父 div 中均匀分布有间隙的元素并自动更改它们的宽度
【发布时间】：2013-11-26 21:01:03
【问题描述】：

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

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

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

【问题讨论】：

标签： jquery resize width distribute evenly

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

这里是fiddle

【讨论】：

效果很好，谢谢！事后看来，我认为现在我自己可以做到这一点，但为时已晚，我累了。 ;) 只有一个我想不通的问题：如果我希望物品具有最大高度并仍然证明它们的合理性怎么办？