Question

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

调整大小和拟合工作正常，但我不知道如何在那里找到空白。

    $(".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});

以下是fiddle

在父div中均匀分布具有间隙的元素并自动更改其宽度

1 个答案: