Question

我有这个HTML：

<article>
  <img src="image.jpg">
  <p> Text </p>
</article>

文字放在图片下方。现在我希望文本与图像的宽度相同，但我不想指定精确的宽度，因为图像的宽度不同（文章也是如此）。

如何使文字宽度与图像宽度相对应，即。在没有指定确切宽度的情况下使其在正确的时间中断？

Answer 1

如果图片不是设定宽度，则需要javascript才能执行此操作。

就个人而言，我会做类似以下的事情。

<强> HTML

 <article>
 <img src="image.jpg" class="image" />
     <p> Text </p>
 </article>

JS - jquery

$("article").each(function(i, obj) {
    var imgWitdh = $(obj).find(".image").width();
    $(obj).find("p").width(imgWidth);
});

Answer 2

我找到了一个仅限CSS的解决方案。这可能不适用于所有浏览器，但肯定似乎适用于主要的浏览器。

article {
  width: -moz-min-content;  /* Firefox/Gecko */
  width: -webkit-min-content;   /* Webkit */    
  width: min-content;
}