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

Question

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

画廊的设置方式如下：

<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 -  .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 -  0.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 -  .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 -  0.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 -  [=10=].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%'); 
 } 
}

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

但是，当我的浏览器window是一半大小时，它不起作用。（抱歉，屏幕截图很难看——最后两个被推到下一行）。

我对为什么会这样感到困惑，所以我制作了 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;
}

Answer 1

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

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

Answer 2

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

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

.outerWidth() returning different widths with different viewport sizes

html

javascript

css

jquery

outerwidth