CSS-div宽度取决于上面的图像大小

.box{背景：灰色；边框：3px纯黑色；浮动：左侧；}
Lorem ipsum dolor sit amet，是一位杰出的献身者。前庭是一个充满活力的调味品。在purus nibh，ullamcorper在suscipit non，scelerisque eget sem

如果我理解正确

如果图像与div（黑边框）大小相同，则文本将自动执行所需操作。或者尝试

溢出：无在div上

但是，就我个人而言，我不会那样做。div是灵活的和可伸缩的，所以我会说在彼此之间使用2或3个div

e、 g

如果你愿意

希望这有帮助：）
您请求的问题是，如果div没有特定的宽度，文本就不“知道”何时换行，这就是为什么它使用outter div的宽度

所以。。。您需要为outter div添加一个宽度，或者如果使用环绕图像+文本的div，则在该div中添加一个宽度

编辑：

给你：

我用一个表做了一个测试（在我的例子中是第三个），首先测试它，让我重新认识它是如何与表一起工作的，然后我将它应用到CSS方法中

工作原理：

您需要有一个最小宽度（1%）的环绕div，并将其显示为表格；然后内部div（对应于“cell”）应该有一个自动高度和隐藏溢出，这是“强制”它拉伸div的宽度+高度（这是一个常见的技巧）所需要的

注意：我没有在Internet Explorer中进行测试，它可以与Firefox和Safari一起使用。
@JackJoe说得很好，您需要为包装div设置一个宽度，以匹配内部图像的宽度

以下是一种方法：

基本上，我使用jQuery确定图像的宽度，然后设置包装器div的宽度

或者，如果从CMS馈送图像，则可以动态确定图像的宽度，然后使用内联样式在包装器div上设置宽度

我不认为CSS仅仅是可能的，因为框模型在内容布局时决定宽度的方式。宽度是从父元素继承而来的，而不是从子元素继承而来。
谷歌搜索抛出了这样一个事实：这个问题已经被问了一百万次，如果不在容器上附加宽度，仍然没有令人满意的方法

然而

我认为这是一个最好由表格元素处理的作业-表格元素有一个
标题
元素，我想说它是该作业的工具

除IE6/7之外的所有浏览器都能很好地处理以下代码—IE6/7可以处理任意宽度的代码，但它不支持CSS属性，因此它不会将标题放在图像下方—这可能是个问题，也可能不是问题—我想它看起来会很漂亮（在那些帧中；），但是YMMV，如果您真的不想在中编写宽度脚本，则可能是另一种选择

<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>

需要的是一个宽度属性，如Android版面中的Available，名为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是什么？好了：你会从CMS或数据库中动态创建图像/标题内容吗？JavaScript/jQuery解决方案有用吗？描述文本将从数据库中动态包含，我不希望使用jQuery。。但是如果不能只用CSS实现，我将尝试这里的jquery解决方案之一我想你误解了我：）你看到我粘贴的HTML示例了吗？我希望描述文本的宽度与上面的图像相同。。不幸的是，没有使用你的示例：（Yearh，我知道jquery有一个“解决方案”，但我只是希望它可以用CSS来解决。你的解决方案可以，但我会等着看是否有CSS解决方案-希望没问题；）我也很好奇，这个html/CSS模式并不像我想的那么明显，因此，看到其他答案会很有趣。感谢您的反馈。如果使用表格，它只需要1%的宽度，不需要标题标签。在我的例子中，检查我的第三项。是的，没错，这也会起作用——但这种方式对我来说感觉更“粗糙”——宽度上的粗糙，而使用第二行作为“标题”在技术上也是一种粗糙，因为一个表已经做到了这一点，但是，如果你真的想要下面的IE7标题，这当然是一个选项——我只是选择了“当标题元素的正确使用会起作用时为什么要使用黑客”的方法——这毕竟是它，不是吗？；）谢谢：）！尽管它是一个宽度很小的hack（1%），但我还是更喜欢这个解决方案而不是jquery…小hack，我喜欢这个双关语：）无论如何，CSS与表相比有一些缺点，这就是一个例子。我在大多数浏览器中都试过，但只有IE7（无需担心IE6）不“喜欢”这一点，这可能会使它工作，我支持另一种可能解决的破解方法。即使如此，知道这是可以做到的，还是很奇妙。
<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>

.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; 
}

<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>