1

我正在尝试做的事情：

我正在制作一个跨越约 700 像素的文章布局。文章顶部是一张图片。当图像宽度小于 600 像素时，我希望图像float:left;为整洁它。示例：我有一个 640 像素宽的图像。不幸的是，文本仍然换行，所以我得到一大块文字被推到图像的右侧......这就是为什么我希望图像所在的 div 跨越整个宽度。

我一直试图让我的 jQuery 工作，我尝试了 3 种不同的方法，但没有一个工作。我想我错过了一些东西。它所做的只是使 div 跨度为 700 像素，而不管图像的宽度如何。

<div class="story-img">
    <img src="images/sample-article-sm.png" alt="A guy installing Solar Panels" width="350"/><br/>
    <span class="caption">Solar panels being installed on a roof.</span>
</div>

我正在使用的 jQuery：

$(document).ready(function() {
var img = $(".story-img > img");
var storydiv = $(".story-img");
var width = img.width();
if (width < 300)
    storydiv.addClass("large");
});

jQuery 正在正常工作，它正在将类添加到 div“.story-img”，但无论图像宽度如何，它都会这样做。起初我以为是因为可能没有在图像中指定宽度（这将被动态加载）。为什么它不抓住宽度？

4

1 回答 1

2

实际上，您是在将图像添加到 dom 之前抓取宽度

所以尝试使用一个load事件

$('.myImage').load(function(){
   alert($(this).width());
   alert($(this).height());
  //do something here
});
于 2013-06-18T19:28:38.827 回答