У меня есть контейнер div. Внутри этого контейнера div находится несколько меньших div, которые я хотел бы разнести по ширине родительского div, добавляя зазор между ними. Количество внутренних div изменится.
Я использую эту формулу (containerWidth-(numberOfBars*gap))/numberOfBars, чтобы определить пространство каждой панели, а затем пытаюсь jquery динамически изменить css.
Я не могу изменить ширину или расставить их.
Скрипка прилагается.
Спасибо!
Вам следует ознакомиться с outerWidth(); Я думаю, что это вполне подходит для этой ситуации. Когда передается true, он принимает внешнюю ширину контейнера, включая поля. Поэтому, когда у вас есть элемент шириной 0 и вы берете внешнюю ширину, это будут только отступы/маржа/граница, которые вы не хотите включать в ширину.
Далее я немного поиграл с вашей логикой. Я взял общую ширину каждого стержня вместо внутренней ширины, а затем использовал внешнюю ширину, чтобы получить из нее внутреннюю ширину. (То есть Container width / n -> Outer Width; Subtract padding -> Inner Width.)
Последнее, что я хочу отметить, прежде чем поделиться обновленной скрипкой: Пожалуйста, пожалуйста, пожалуйста, в будущем сначала проверьте свою скрипку. Вы создали переменные bar и container, ни одна из которых не была определена. Вы также не использовали $(document).ready(...) или что-то подобное.
Во-первых, я установил для вашего width значение 0 (чтобы получить правильную внешнюю ширину). Затем я рассчитал ширину как таковую:
var barOuterWidth = Math.floor(containerWidth / n);
var barInnerWidth = barOuterWidth - $(".bar").outerWidth(true);
Наконец, я использовал 'width': barInnerWidth, для установки ширины.
Результат в этом jsFiddle. Обратите внимание, что справа есть разрыв поля; Я уверен, что вы можете найти способ облегчить это. (i == n - 1 или еще что-то.)
