Распределите элементы с пропуском между ними равномерно в родительском элементе div и измените их ширину автоматически

Question

Проблема: Div имеет размер 850 пикселей и имеет переменное количество дочерних элементов (изображение в элементе ссылки). Я хочу, чтобы они автоматически меняли свою ширину, чтобы они заполняли родительский элемент div с шириной в 10 пикселей между ними. Также они должны быть обоснованы у родителя, а у первого и последнего ребенка не должно быть пробела слева, соответственно, справа.

Изменение размера и подгонка прекрасно работает, но я не знаю, как получить пробелы там.

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

Вот скрипка