CSS父元素忽略子元素內的文本以確定寬度

如果不修復任何元素的寬度，我希望父div元素在設置寬度時忽略文本。我希望元素的寬度僅受圖像寬度的影響。CSS父元素忽略子元素內的文本以確定寬度

<div> 
    <img src="https://lh4.ggpht.com/9BAW9uE48gxNUmnQ7T6ALpNTsrCHOZBMfF__mbamBC36edSw0uc-kjQxgtZ3O3aQWFY=h900"/> 
    <p>I want this text to wrap once this paragraph element reaches the width of the image.</p> 
</div> 

div { 
    background: green; 
    display: inline-block; 
}

my jsFiddle

任何意見是

來源

2013-07-30 TaylorMac

格的變化顯示性能大大讚賞table-caption
（經測試，在Firefox和Chrome）

更新jsfiddle

來源

2013-07-30 19:12:36 mutil

不錯，支持似乎也不是那麼糟糕（IE8 +）：https：//developer.mozilla.org/en-US/docs/Web/CSS/display – Pevara

老實說，我比你想象的更快樂。 – TaylorMac

這意味着你將不得不向上移動DOM t再見，因爲你想要圖像來確定它的父寬度。 向上移動DOM樹不幸是不可能的（還）。

作爲一種替代方案，您可以將定位文本絕對，以將其從文檔流中提取出來，因此不會影響其父div的寬度。然而這也意味着的身高不會受到影響，這可能不是你所追求的。您可以通過重複父級背景來模仿正確的高度，但下面的內容不會被推下，所以這也不是我想的選項。我建立了一個例子：http://jsfiddle.net/y8Qnd/2/

我能想到的唯一選擇是javascript。獲取圖像的寬度並將其應用於父容器。在jQuery的（我可能會得到撞壞了使用jQuery這樣的微不足道的事情，但我只是不習慣寫「老同學的javascript」了......），它會是這個樣子：

var $wrapper = $('div'); // you will probabaly want to use some id or class here 
var width = $wrapper.find('img').width(); 
$wrapper.css('width', width);

和一個例子：http://jsfiddle.net/y8Qnd/6/

來源

2013-07-30 19:13:11 Pevara

這裏是最好的，我發現：

http://jsfiddle.net/y8Qnd/3/

我所做的一切是採取p標記出流與position: absolute使得containi ng div只是圖像的寬度。然後，讓p標籤繼承其父級容器的寬度。這並不能修復p標籤的寬度，並且完全是跨瀏覽器的。

來源

2013-07-30 19:13:27 MattDiamant

指向小提琴的鏈接可以很容易地看到結果，但如果您在答案本身中包含CSS（也許重複使用HTML），這將會是更好的答案。 – Lambart

CSS父元素忽略子元素內的文本以確定寬度

回答

相關問題