Html CSS：强制文本换行（或仅通过其一个子元素定义元素宽度）
好吧，这对我来说很奇怪。下面是我正在使用的HTML元素： 有说明的照片。理想情况下，通过纯CSS，我希望它看起来像这样： 图像父元素的宽度需要取决于图像的大小 我可以根据需要更改标记。（文本当前不在其自己的div中，但如果必要，可以在其中。）CSS中有什么方法可以实现这一点吗？我得到的印象是，我需要“强制”尽可能多地包装文本（这似乎是不可能实现的），或者使整个元素的宽度仅依赖于一个元素而忽略另一个元素（我以前从未听说过）Html CSS：强制文本换行（或仅通过其一个子元素定义元素宽度）,html,css,image,Html,Css,Image,好吧，这对我来说很奇怪。下面是我正在使用的HTML元素： 有说明的照片。理想情况下，通过纯CSS，我希望它看起来像这样： 图像父元素的宽度需要取决于图像的大小 我可以根据需要更改标记。（文本当前不在其自己的div中，但如果必要，可以在其中。）CSS中有什么方法可以实现这一点吗？我得到的印象是，我需要“强制”尽可能多地包装文本（这似乎是不可能实现的），或者使整个元素的宽度仅依赖于一个元素而忽略另一个元素（我以前从未听说过） 真的有办法吗？还是我需要使用神奇的Javascript？（JS解决方案
真的有办法吗？还是我需要使用神奇的Javascript？（JS解决方案相当简单，但相当蹩脚…将容器制作成具有表布局的表：固定，并将图像放在顶行。您还可以使用display:table-*属性（以及IE7 js库，用于IE6兼容性）使用纯CSS来实现这一点
表布局：fixed的作用是，一旦知道每个表列中第一个单元格的宽度，表绘制算法就会锁定该列的宽度。标题将无处展开，因此它将环绕到图像的宽度（第一个单元格） 表格的答案会起作用。很容易。我不能鼓励使用它，但易用性确实有其优点。我打算建议使用
clip:就我个人而言，这是一种你必须接受它并继续工作的情况。好吧，看来没有简单的解决方案我可以做到。谢谢你帮我解决这个问题：） 我认为，考虑到我将如何存储这些图像，访问宽度不会涉及不断的重新计算。我可以用服务器端的魔法来代替
谢谢 这里有一个解决方案可能不适合您，即使它确实生成了您要求的布局：
<!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>
第a部分{浮动：左；
位置：相对；}
b组{
位置：绝对位置；
最高：100%；
左：0；
右：0；
文本对齐：居中；
背景色：灰色；}
字幕文本字幕文本字幕文本字幕文本字幕文本字幕文本
如果您将某些内容放在div a下面，您会看到不令人满意的原因。它将与标题重叠，因为绝对定位的标题没有垂直扩展父div。如果你在下面有足够的空白，或者你愿意保留它，它仍然可能对你有用。我想出了一个有效且相当干净的解决方案 该解决方案使用一个表（如果愿意，也可以使用display:table的div），并添加第二列，将第一个单元格“推”到它真正需要的最小空间中。表格的宽度可以设置为1px，以阻止其在整个页面上增长。我制作了一个演示来展示这一点：
在IE8、Firefox和Safari/Win中测试和工作尝试您所描述的内容；一定是做错了什么。你好，世界你好，伙计们，你好吗？因为示例代码似乎呈现了我通常看到的表——由最宽的列设置。还有什么我需要定义的吗？它似乎是表格布局：修复了当表格宽度为自动时失败的问题。我想出了一个更好的解决方案，尽管它是有效的（见我的另一个答案）。