Elemento genitore CSS ignora il testo all'interno dell'elemento figlio per determinare la larghezza

Question

Senza fissare le larghezze di nessuno degli elementi, vorrei che l'elemento div genitore ignorasse il testo quando ne impostava la larghezza. Voglio che la larghezza dell'elemento sia influenzata dalla larghezza dell'immagine.

<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

Qualsiasi consiglio è apprezzato notevolmente

Answer 1

proprietà Cambia visualizzazione delle div a table-caption
(testato in Firefox e Chrome)

Aggiornato jsfiddle

Answer 2

Ciò significherebbe dovresti spostare il DOM t ree, come vuoi che l'immagine determini la sua larghezza genitore. Purtroppo non è possibile spostare l'albero DOM (ancora).

In alternativa, è possibile posizionare il testo assoluto, per sollevarlo dal flusso del documento e, pertanto, non influire sulla larghezza del div principale. Ciò tuttavia significherebbe anche che l'altezza non viene influenzata dallo , che probabilmente non è quello che si sta cercando. Si potrebbe simulare l'altezza corretta ripetendo lo sfondo genitore, ma il contenuto di non verrà premuto in basso, quindi anche questa non è un'opzione, penso. Ho comunque creato un esempio: http://jsfiddle.net/y8Qnd/2/

L'unica opzione che posso pensare è javascript. Ottieni la larghezza dell'immagine e applicala al contenitore genitore. In jQuery (io probabilmente ottenere sbattuto per l'utilizzo di jQuery per una cosa così banale, ma io non sono solo utilizzati per la scrittura 'vecchia scuola javascript' più ...) sarebbe simile a questa:

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

e un esempio: http://jsfiddle.net/y8Qnd/6/

Answer 3

Ecco il meglio che ho trovato:

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

quello che ho fatto è quello di prendere il tag p di flusso con position: absolute in modo che il containi ng div ha la larghezza della sola immagine. Quindi, il tag p eredita la larghezza del relativo genitore, il contenitore. Questo non risolve la larghezza del tag p ed è completamente cross-browser.