css - 自动将 的宽度分配给包含的 ，其中图像的宽度未知

Question

不确定我对标题的措辞是否最佳，但这是对我的问题的简单解释。

我有一个像这样的 HTML 结构:

<div class="media-container" style="float: left">
  <img src="..." />
  <p class="caption">Here is a long caption that will extend beyond the width of the image.</p>
</div>

这是它最终的样子:

我希望标题文本在达到图像宽度后换行，因此它看起来像这样:

我可以通过在容器 div 上设置一个 fixed with 来按照我想要的方式获得它，但是我不知道提前知道那个宽度，所以没有办法。

对于我忽略的这个问题，是否有任何解决方案可以在不涉及 JavaScript 的情况下在纯 CSS 中实现？

Answer 1

使用display: table;

.media-container {
  display: table;
}

.caption {
  display: table-caption;
  caption-side: bottom;
}

<div class="media-container" style="float: left">
  <img width="100" src="https://d1ra4hr810e003.cloudfront.net/media/27FB7F0C-9885-42A6-9E0C19C35242B5AC/0/D968A2D0-35B8-41C6-A94A0C5C5FCA0725/F0E9E3EC-8F99-4ED8-A40DADEAF7A011A5/dbe669e9-40be-51c9-a9a0-001b0e022be7/thul-IMG_2100.jpg" />
  <p class="caption">Here is a long caption that will extend beyond the width of the image.</p>
</div>

fiddle :https://jsfiddle.net/4pL4wm9h/