.outerWidth() 返回具有不同视口大小的不同宽度答案

【问题标题】：.outerWidth() returning different widths with different viewport sizes.outerWidth() 返回具有不同视口大小的不同宽度
【发布时间】：2016-02-14 11:40:44
【问题描述】：

我有一个水平滚动的图片库。包含所有图像的<div> 的宽度是通过汇总所有孩子的outerWidths 动态生成的。

画廊的设置如下：

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

categoryImageArea 的宽度是使用以下函数生成的：

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

当我的浏览器窗口最大化 (1900 x 1280) 时，效果很好：

但是，当我的浏览器窗口大小减半时，它就不起作用了。（对不起，截图很难看——最后两个被推到下一行）。

我很困惑为什么会这样，所以我将 JQuery change() 函数（上图）alert 设置为 width 的值，因为它在这两种情况下都为其添加了值。很奇怪。

大视口（良好）：0 > 984 > 1969 > 2953 > 3937 > 4921
半视口（坏）：0 > 656 > 1312 > 1968 > 2624 > 3280

所以我的问题是：到底是什么让$(element).outerWidth(true) 的价值如此不同只是因为我的浏览器视口不同？

作为参考，应用于categoryImage 的样式是：

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

【问题讨论】：

标签： javascript jquery html css outerwidth

【解决方案1】：

在 .categoryImage 上，将 display:inline-block 替换为 float:left。然后上。 categoryImageArea 添加一个类overflow:hidden 或clearfix。

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

【讨论】：

另一种选择是尝试加载图像：desandro.github.io/imagesloaded
该方法与我目前使用的方法有什么区别？我将其更改为float: left;，但问题仍然存在。
我经常遇到显示内联块的问题，浮动通常会修复它。发布之后，我开始思考，也许你有一个类似的问题，这与砌体级联网格布局很常见 - 如果 JS 在图像之前加载，宽度计算不正确。
我也这么认为。所以我试图让change() 函数在$('.categoryImageArea').ready(function(){ 之后应用，但这也不起作用。我有一种感觉，窗口大小正在以某种方式改变图像。我不确定如何，但由于它是一个响应式站点，可能会有 CSS 百分比改变 categoryImage 的宽度。不确定，还没弄明白。

【解决方案2】：

我发现了问题所在。无论出于何种原因，img { max-width: 100%; } 正在改变outerWidth(); 的值（仅在某些情况下）。为了解决这个问题，我设置了.categoryImage img{ max-width: none; }，这解决了我遇到的奇怪问题！

【讨论】：