CSS - 格宽度取决于图像大小以上
<html><head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
.box {background:gray;border:3px solid black;float:left;}
</style>
</head>
<body>
<div class="box">
<img src="http://i.stack.imgur.com/shWOu.jpg">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis ante ac sapien pellentesque vitae condimentum odio euismod. In purus nibh, ullamcorper in suscipit non, scelerisque eget sem. </p>
</div>
</body></html>正如你可以看到现在，与黑色边框的盒子具有自动宽度调整到里面的内容。问题是我希望盒子的大小适应内部图像的宽度。因此，如果图像的宽度与示例（红色框）的宽度相同，则下面的文本应该停在蓝点标记处，然后再往下走一条新线。
但是，我该怎么做？
您的要求的问题是，如果格不具有特定宽度的文字不“知道”什么时候打包，这就是为什么它使用了外部div的宽度...
所以...您需要为outter div添加宽度，或者在使用围绕图像的div的情况下+文本，在该div中的宽度。
编辑：
在这里你去： http://jsfiddle.net/jnmtu/
我做了一个测试（在我的例子是第三个）与表首先测试它，并刷新我的如何与工作心态表格，然后我将它应用于CSS方式。
工作原理：
你需要有一个周围的div具有最小宽度（1％），并使其显示为一个表;那么内部div（对应于“单元格”）应该有一个自动高度和隐藏溢出，这是需要“强制”它伸展div的宽度+高度（这是一个常见的技巧）。
注：我没有在Internet Explorer中测试过，它可以与Firefox和Safari一起使用。
谢谢:)！尽管它的宽度很小（1％），但我仍然比jquery更喜欢这个解决方案... – donpedroper 2011-03-31 11:11:22
小小的黑客，我喜欢这个双关键词:)无论如何，CSS与表格相比有一些缺点，这是一种情况。我在大多数浏览器中试过，只有IE7（从不知道IE6）不会“喜欢”这个，它可能会使它工作，我认为它可以解决另一个黑客。即使如此，知道它可以完成也是非常好的。 – jackJoe 2011-03-31 14:43:22
如果我理解正确的话，
如果图像大小为DIV（黑色边框）相同，则文本会自动做你想做的。或者在div上尝试overflow: none;。
但是，我个人不会这样做。 Div是灵活的和可扩展的所以我会说在对方内使用2或3个div。
例如
<div id="black-border">
<div id="for-image">
<div id="the-image-itself">
<img src="image.jpg"/>
</div>
<div id="the-comment">
<p> This image is awesome</p>
</div>
</div>
</div>
只是给图像一个固定的大小，并输入评论。 您还可以设置
#the-image-itself, #the-comment{
display: block;
}
如果你喜欢
希望这有助于:)
我认为你误会了我:)你见过我粘贴的HTML例子吗？我希望描述文字与上面的图像具有相同的宽度。不幸的是您的示例不适用于：（ – donpedroper 2011-03-30 11:18:31
@JackJoe说得好，你需要设置一个宽度来包装div来匹配内部图像的宽度。
这里是做的一种方法：http://jsfiddle.net/audetwebdesign/bpN8x/
基本上，使用jQuery以确定图像的宽度，然后设置包装div的宽度。
或者，如果您要从CMS中提供图像，则可以动态确定图像的宽度，然后使用内联样式设置包装div的宽度。
我不认为只有CSS才是可能的，因为盒子模型决定了内容布局时的宽度。宽度从父元素继承，并不会从子元素传递。
Yearh，我知道jquery有一个“解决方法”，但我只是希望它可以用CSS修复。您的解决方案可以工作，但我会等着看是否还有CSS解决方案 - 希望没关系; ） – donpedroper 2011-03-30 11:49:17
我也很好奇，这个html/css模式并不像我想的那么明显，所以看到其他答案会很有趣。感谢您的反馈。 – 2011-03-30 11:56:35
谷歌搜索抛出了这样的事实，这个问题已经被问了万次，并且目前仍无令人满意的方式没有宽度附着在容器
但是......
这个我想是由表元素最好处理的工作 - 表元素有一个caption元素，我会说这是工作的工具？
除了IE6/7的所有浏览器处理下面的代码位好 - IE6/7处理它尽可能的宽度变，但它不支持CSS caption-side属性，因此它不会把字幕图像下面 - 这可能会或可能不会是一个问题 - 恕我直言，它仍然看起来相当（在这些帧;）），但情况因人而异，也许一个选择，如果你真的不想脚本
<div class="content">
<table summary="image with caption">
<caption>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
</caption>
<tr>
<td><img src="http://dummyimage.com/300x300/dad/fff" width="300" height="300" alt="This image is awesome"></td>
</tr>
</table>
</div>
CSS宽度：
.content {
float: left;
padding: 20px;
border: 2px solid #000;
}
.content table {
border: 0;
border-collapse: collpase;
}
.content td {
padding: 0;
}
.content caption {
caption-side: bottom;
}
如果使用表格，它只需要1％的宽度，不需要标题标签。检查我的例子中的第三个项目。 – jackJoe 2011-03-30 16:13:42
是真的，那将工作太 - 但这样的感觉多了很多“哈克”我 - 为宽度的黑客，并在“标题”使用第二排的在技术上太考虑到表中的黑客已经做他们，但它肯定是一个选项，如果你真的想下面的IE7标题 - 我只是去了“_why使用黑客当** caption元素的正确使用**将DO_”的做法 - 这毕竟是它是什么，不是吗？ ;） – clairesuzy 2011-03-30 16:35:21
需要怎么做才能是一个宽度attribu te就像Android布局中的availabe，它被命名为width：wrap-content。也许这对于CSS来说是一个很好的建议，因为它在设计屏幕方面已经证明很方便。
FWIW我想出了一个最小的jQuery是这个
<div class="caption_wrap" style="float:right">
<img src="IMAG0332.jpg" onload="jQuery(this).parent().width(jQuery(this).width());"/><br />
this is some caption text, this is some caption text, this is some caption text, this is some
caption text</div>
快。
你现有的HTML和CSS是什么？ – BoltClock 2011-03-30 10:54:48
你去那里：http://pastehtml.com/view/1duy9p9.html – donpedroper 2011-03-30 11:03:40
你会从CMS或数据库动态创建图像/标题内容吗？ – 2011-03-30 11:21:59