保持标题宽度与图像相同，并使周围文本换行

Question

我正在开发一个会有各种字幕图片的网站。这些图像会随时间变化，宽度会有所不同。我希望标题始终与图像的宽度相同，而不必说明实际的图像宽度。

我在Marc Audet提供的这个论坛上发现了一个JQuery脚本（“CSS - div宽度取决于2011年3月30日以上的图像大小”），这似乎有效。我更改了类名以匹配我自己的类名，但是脚本应该与他提供的相同。

$(document).ready(function() {
    theWidth = $(".photo_caption img").css('width');
    $(".photo_caption").css('width',theWidth);
});

但是，有两件事我有疑问。

1- .photo_caption上的CSS样式无效。我可以给它一个紫色的4 px边框，向右添加浮点数，添加100px的填充，但这些都不会发生。为什么造型不适用？我也想知道这个问题是否与下面的第二个问题有关。

2 - 我喜欢周围的段落文字环绕图像和标题。我已经尝试在.photo_caption div上添加一个浮动但是到目前为止没有任何效果。

这是该网站的链接。这是中间栏目，“高中学生，现在申请NBCAF ART奖学金”，我指的是。

www.laurafigdesign.com/nbcaf

作为一名非常新手的设计师，我很欣赏任何解决这些问题的建议。

谢谢， 劳拉

Answer 1

关于问题＃1 - CSS样式不适用。

当我查看.photo_caption样式表中的规则时，我看到了：

.photo_caption {
    width:1%;
    border: 1px solid orange;
    margin: 0 auto;
    float:left;
    padding:12px;
    background-color:  #f00;
}

在那里似乎有一些奇怪的unicode字符（在边界之前等）。摆脱那些，它应该工作。

至于要包围周围的文本，浮动它应该工作。我认为这可能与您之前的问题有关。