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

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