保持标题宽度与图像相同，并让周围的文本换行 [重复]

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 边框，向右添加浮动，添加 100 像素的填充，但这些都没有发生。为什么不应用样式？我还想知道这个问题是否与下面的第二个问题有关。

2-我希望周围的段落文本环绕图像和标题。我尝试在 .photo_caption div 上添加一个浮点数，但到目前为止没有任何效果。

这是该网站的链接。我指的是中间一栏，“高中生，立即申请 NBCAF 艺术奖学金”。

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 字符（在边界之前等）。摆脱这些，它应该可以工作。

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