好吧，这对我来说很奇怪。这是我正在使用的 HTML 元素：
LOLZ http://www.ubuntu-pics.de/bild/14571/screenshot_030_0O2o3D.png
一张带标题的照片。理想情况下，我希望它通过纯 CSS 看起来像这样：
alt text http://www.ubuntu-pics.de/bild/14572/screenshot_031_mp84u7.png
图片父元素的宽度需要依赖图片的大小。
我可以根据需要更改标记。 （文本当前不在其自己的 div 中，但如有必要，可以。） CSS 中有什么方法可以完成此操作吗？我的印象是我需要“强制”文本尽可能多地换行（这似乎无法实现），或者使整个元素的宽度仅取决于一个元素而忽略另一个元素（我从未听说过之前的）。
有真正的方法吗？还是我需要使用神奇的 Javascript 来代替？ （JS的方案比较简单，但是比较蹩脚……）
【问题讨论】：
查看great article，了解处理带有字幕的图像的最佳方法。
就个人而言，这是你必须接受它并继续努力的情况之一。
【讨论】：
使用 table-layout:fixed 使容器成为表格并将图像放在第一行。您也可以使用 display:table-* 属性（以及用于 IE6 兼容性的 IE7-js 库）对纯 CSS 执行此操作。
table-layout:fixed 的作用是，一旦知道该列中第一个单元格的宽度，表格绘制算法就会锁定每个表格列的宽度。标题将无处可扩展，因此它将包裹到图像的宽度（第一个单元格）。
【讨论】：
| hello world |
| 大家好，你们好吗？ |
好的，看来我没有简单的解决方案可以解决。谢谢你帮我解决这个问题:)
我认为，考虑到我将如何存储这些图像，访问宽度不会涉及不断的重新计算。我可以改用那个服务器端的魔法。
谢谢！
【讨论】：
这是一个可能对您不起作用的解决方案，即使它确实生成了您请求的布局：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
div.a {float: left;
position:relative;}
div.b {
position: absolute;
top: 100%;
left: 0;
right: 0;
text-align: center;
background-color:gray;}
</style>
</head>
<body>
<div class="a">
<img src="http://stackoverflow.com/content/img/so/logo.png" alt="">
<div class="b">Caption text Caption text Caption text Caption text Caption text </div>
</div>
</body>
</html>
如果在 div a 下方放置一些内容，您会看到不满意的原因。它将与标题重叠，因为绝对定位的标题没有垂直扩展父 div。如果您在下方有足够的空白空间或者您愿意保留它，它仍然可能对您有用。
【讨论】：
我想出了一个可行且相当干净的解决方案。
该解决方案使用一个表格（如果您愿意，也可以使用带有 display:table 的 div）并添加第二列以将第一个单元格“推”到它真正需要的最小空间中。表格可以设置为 1px 宽度以阻止它在整个页面中增长。我已经制作了一个演示来展示这一点：
http://test.dev.arc.net.au/caption-layout.html
在 IE8、Firefox 和 Safari/Win 中测试和工作
【讨论】：
table 答案会起作用。容易地。我不能鼓励使用它，但易用性确实有其优点。我打算建议使用clip: CSS 属性，但我无法让它在我的本地机器上工作（出于某种原因，尽管它完美地呈现cssplay.co.uk 处的example）。
这样做的缺点是它可能仅在您为容器定义固定宽度时才有效。不过，我相信一定有办法。我会继续寻找。
【讨论】：