<分区>
<分区>
我正在开发一个包含各种带字幕图片的网站。这些图像会随着时间的推移而变化，宽度也会发生变化。我希望标题始终与图像宽度相同，而不必声明实际图像宽度。
我在这个由 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 像素的紫色边框，向右添加 float ，添加 100 像素的填充，但这些都没有发生。为什么不应用样式？我还想知道这个问题是否与下面的第二个问题有关。
2-我希望周围的段落文本环绕图像和标题。我试过在 .photo_caption div 上添加一个 float ，但到目前为止没有任何效果。
这是该站点的链接。我指的是中间栏，“高中生，现在申请 NBCAF 艺术奖学金”。
www.laurafigdesign.com/nbcaf
作为一个非常新手的设计师，我很感激任何解决这些问题的建议。
谢谢， 劳拉
最佳答案
关于问题 #1 - CSS 样式不适用。
当我查看 .photo_caption 样式表中的规则时，我看到了这一点:
.photo_caption {
width:1%;
   border: 1px solid orange;
   margin: 0 auto;
   float:left;
   padding:12px;
background-color: #f00;
}
那里似乎有一些奇怪的 unicode 字符(在边框之前，等等)。摆脱那些，它应该工作。
至于让周围的文字换行， float 应该可行。我认为这可能与您之前的问题有关。
关于jquery - 保持标题宽度与图像相同，并让周围的文本换行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8009068/