.outerWidth(), возвращающий разную ширину с разными размерами видовых экранов

Question

У меня есть горизонтальная прокрутка галереи изображений. <div>, который содержит все изображения, имеет свою ширину, генерируемую динамически, суммируя внешние ширины всех дочерних элементов.

Вот как галерея устанавливается:

<div class="categoryImageArea">  
 
\t <div class="categoryImage" onclick="window.location = 'http://localhost/kitkittle/product/test-1'"> 
 
\t \t <img src="http://localhost/kitkittle/uploads/images/full/58172669e54ea075971494d6293444f5.jpg"><br> 
 
\t \t <h3>Half Bubble - $50.00</h3> 
 
\t </div> 
 
\t <div class="categoryImage" onclick="window.location = 'http://localhost/kitkittle/product/bubble-mitosis'"> 
 
\t \t <img src="http://localhost/kitkittle/uploads/images/full/23aacfda65e43671bede87bc18902b81.jpg"><br> 
 
\t \t <h3>Bubble Mitosis - $300.00</h3> 
 
\t </div> 
 
\t <div class="categoryImage" onclick="window.location = 'http://localhost/kitkittle/product/bubble-on-water'"> 
 
\t \t <img src="http://localhost/kitkittle/uploads/images/full/1e2dc5352f831ebacd3ccbb7a9b4717a.jpg"><br> 
 
\t \t <h3>Bubble on Water - $10.00</h3> 
 
\t </div> 
 
\t <div class="categoryImage" onclick="window.location = 'http://localhost/kitkittle/product/bubble-on-water1'"> 
 
\t \t <img src="http://localhost/kitkittle/uploads/images/full/69f7b2c3b640444dd5a23c3037c3cc84.jpg"><br> 
 
\t \t <h3>Bubble on Ocean - $210.00</h3> 
 
\t </div> 
 
\t <div class="categoryImage" onclick="window.location = 'http://localhost/kitkittle/product/swimming-bubbles'"> 
 
\t \t <img src="http://localhost/kitkittle/uploads/images/full/2d66a56b9f51f29ad5c6f58c82b2ab39.jpg"><br> 
 
\t \t <h3>Swimming Bubbles - $0.00</h3> 
 
\t </div> 
 
</div>

Ширина categoryImageArea генерируется с использованием следующей функции:

function change(){ 
 
\t if($(window).width() > 768){ 
 
\t \t var width = 0; 
 
\t \t $('.categoryImage').each(function(index, element){ 
 
\t \t \t width += $(element).outerWidth(true); 
 
\t \t }); 
 
\t \t $('.categoryImageArea').width(width); 
 
\t } 
 
\t else{ 
 
\t \t $('.categoryImageArea').width('100%'); 
 
\t } 
 
}

Когда мое окно браузера развернуто (1900 х 1280), это прекрасно работает:

Однако, когда мое окно браузера половина размера, она не работает. (извините, скриншот трудно увидеть - последние две будут перенесены на следующую строку).

Я был озадачен, почему это было бы, поэтому я сделал функцию JQuery change() (выше) alert значение width как это добавляет ценности к ней в обоих случаях. Странно.

• Большие окна просмотра (хорошо): 0> 984> 1969> 2953> 3937> 4921
• Половина видового экрана (плохо): 0> 656> 1312> 1968> 2624> 3280

Так мой вопрос: что на самом деле делает значение $(element).outerWidth(true) SO отличается только тем, что в моем обозревателе браузера разные?

Для справки, стили применяются к categoryImage являются:

.categoryImage { 
 
    display: inline-block; 
 
    margin: 2em; 
 
    position: relative; 
 
    cursor: pointer; 
 
}

Answer 1

Я понял, проблема. По какой-то причине img { max-width: 100%; } изменял значение outerWidth(); (только в некоторых случаях). Чтобы решить проблему, я установил .categoryImage img{ max-width: none; }, и это решило странные проблемы, которые у меня были!

Answer 2

На .categoryImage заменить дисплей: встроенный блок с плавающей точкой: слева. Затем на . categoryImageArea добавляет класс переполнения: скрытый или clearfix.

.categoryImage { 
    float:left; 
    margin: 2em; 
    position: relative; 
    cursor: pointer; 
}