div và đoạn thu nhỏ để phù hợp, dựa trên hình ảnh?

Question

Mã bên dưới là phiên bản đơn giản của trang web của tôi. Trên trang web của tôi, chiều rộng hình ảnh thay đổi từ trang này sang trang khác và văn bản là khoảng 100 từ. Điều đó có nghĩa là đoạn trải dài DIV để rộng hơn hình ảnh. Chỉ sử dụng CSS, có thể thu nhỏ DIV và đoạn văn bản theo chiều rộng của hình ảnh không?

JSFiddle here

Example of what I'm trying to describe here. Đầu là những gì tôi nhận được, đáy là những gì tôi muốn.

HTML

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

CSS

div { 
    display: inline-block; 
    } 

Answer 1

Và để làm bảng bất cứ điều gì liên quan đến tôi thì mãi mãi xấu hổ bản thân mình: http://jsfiddle.net/WM6hK/3/

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

p { 
border: 1px solid blue; 
}​ 

Answer 2

Không, nó không thể bằng cách chỉ sử dụng CSS. Bạn sẽ cần phải thiết lập chiều rộng cho div cha và rescale hình ảnh của bạn.

Answer 3

tôi khuyên bạn nên thêm vào một chút jquery .. để làm cho cuộc sống của bạn trở nên dễ dàng hơn nhiều:

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

Sau đây là cách nó sẽ trông: http://jsfiddle.net/WM6hK/2/

Bằng cách này bạn có thể thêm dòng này mã đơn giản cho bất kỳ div nào và chỉ thay thế $ ("div") bằng ID và ID $ ("# idofdiv"). Hi vọng điêu nay co ich!

Answer 4

Ngay bây giờ mình không thể, sử dụng CSS

Sử dụng jQuery, nó dễ dàng như việc này

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

Demo

Answer 5

Bạn có thể sử dụng: -

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


p { 
    border: 1px solid blue; 
    } 

Nó hoàn toàn sẽ làm việc theo kích thước hình ảnh .....

xem minh họa: -http://jsfiddle.net/WM6hK/11/