javascript - .outerWidth() 返回具有不同视口(viewport)大小的不同宽度

Question

我有一个水平滚动的图片库。 <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 的值因为它在这两种情况下都增加了值(value)。很奇怪。

• 大视口(viewport)(好):0 > 984 > 1969 > 2953 > 3937 > 4921
• 半视口(viewport)(坏):0 > 656 > 1312 > 1968 > 2624 > 3280

所以我的问题是:到底是什么在创造 $(element).outerWidth(true) 的值(value)？如此不同只是因为我的浏览器视口(viewport)不同？

作为引用，应用于 categoryImage 的样式是:

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

Answer 1

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

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