0

我有一个水平滚动的图像库。包含所有图像的<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）时，效果很好： 在此处输入图像描述

在此处输入图像描述

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

我很困惑为什么会这样，所以我将 JQuerychange()函数（上图）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;
}

4

2 回答 2

0

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

.categoryImage {
    float:left;
    margin: 2em;
    position: relative;
    cursor: pointer;
}
于 2015-11-12T23:51:00.157 回答
0

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

于 2015-11-23T18:53:48.847 回答