將文本寬度與圖像匹配，但沒有指定確切的寬度

Question

對不起，如果這是一個簡單的事情。我一直在努力弄清楚，並且迄今爲止沒有運氣尋找答案。

我有這樣的HTML：

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

文本放在圖像下方。現在我希望文字與圖像的寬度相同，但我不想指定確切的寬度，因爲圖像的寬度不同（文章也是如此）。

如何使文本寬度對應於圖像寬度ie。使其在正確的時間中斷而不指定確切的寬度？

親切的問候，並感謝您

Answer 1

我發現了一個CSS的唯一解決方案。這可能不適用於所有瀏覽器，但似乎可以在主要瀏覽器中運行。

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

見琴：http://jsfiddle.net/U2Vxr/

而且對此事進行了完整的文章：http://demosthenes.info/blog/662/Design-From-the-Inside-Out-With-CSS-MinContent

Answer 2

您需要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); 
});