Dowolny element div i akapit w zależności od obrazu?

Question

Poniższy kod jest uproszczoną wersją mojej witryny. W mojej witrynie szerokość obrazu różni się w zależności od strony, a tekst zawiera około 100 słów. Oznacza to, że akapit rozciąga DIV, aby był szerszy niż obraz. Używając tylko CSS, czy możliwe jest zmniejszenie DIV i akapitu do szerokości obrazu?

JSFiddle here

Example of what I'm trying to describe here. Najważniejsze jest to, co dostaję, na dole jest to, czego chcę.

HTML

<div> 
    <img src="image.jpg" /> 
    <p>Lorem ipsum dolor sit amet.</p> 
</div> 

CSS

div { 
    display: inline-block; 
    } 

Answer 1

i robienia tabeli Wszystko związane będę zawsze wstyd się: http://jsfiddle.net/WM6hK/3/

div { 
display: table; 
border: 1px solid red; 
width: 1%; 
} 

p { 
border: 1px solid blue; 
}​ 

Answer 2

Nie, to nie jest możliwe tylko za pomocą CSS. Musisz ustawić szerokość div jednostki nadrzędnej i przeskalować swoje obrazy.

Answer 3

zalecam dodanie w małej jQuery .., aby twoje życie o wiele łatwiejsze:

imgw = $("img").width(); 
$("div").css("width", imgw); 

Oto jak to będzie wyglądać: http://jsfiddle.net/WM6hK/2/

ten sposób można dodać tę prostą linię kodu do dowolnego div i po prostu zamień $ ("div") na i ID $ ("# idofdiv"). Mam nadzieję że to pomoże!

Answer 4

Teraz jej nie możliwe, za pomocą CSS

jQuery, jej tak proste, jak to

$("div").width($("div img").width()); 

Demo

Answer 5

Można użyć tego: -

div { 
    width:20%; 
    display:inline-table; 
    } 


p { 
    border: 1px solid blue; 
    } 

To będzie całkowicie pracy według wielkości obrazu .....

zobaczyć demo: -http://jsfiddle.net/WM6hK/11/