Объединенная ширина изображений, примененная к div - не работает, когда изображения имеют отступы

Question

Мне нужно получить объединенную ширину изображений внутри div и применить эту ширину к div.Я использую этот код отсюда:

Возьмите объединенную ширину нескольких изображений и примените к их содержащему div

$(document).ready(function() {
    $('div').each(function() {
        var totalImageWidth = 0;

        $("img", this).each(function () {
          totalImageWidth += $(this).width();
        });

        $(this).width(totalImageWidth);
    });
});

Это будет работать до тех пор, пока я не применю отступы к изображениям,Тогда содержащийся div слишком мал, поскольку изображения занимают больше места.

Чтобы попытаться это исправить, я изменил «img» на изображение, содержащее div.Так вот: ("img", this) становится так: ("div-which-is-around-image", this).

По какой-то причине содержащийся div теперь слишком широк.Я понятия не имею, почему это происходит.Я изменил dom, готовый к загрузке окна, если проблема была в том, что изображения не загружались вовремя, но это не имеет значения.

Спасибо

Answer 1

Упс, я плыл изображение слева, но не его div. Плавающий их оба исправил это. Спасибо

Answer 2

Вы можете использовать метод innerWidth () вместо width () который возвращает значение, включая отступы (исключая границы и поля) Ваш код должен выглядеть так:

$(document).ready(function() {
    $('div').each(function() {
        var totalImageWidth = 0;

        $("img", this).each(function () {
          totalImageWidth += $(this).innerWidth();
        });

        $(this).width(totalImageWidth);
    });
});