缩小到适合的div和段落，基于图像？ [英] Shrink-to-fit div and paragraph, based on image?

问题描述

以下代码是我的网站的简化版本。在我的网站上，图片宽度因页面而异，文字大约为100个字。这意味着段落将DIV扩展到比图像更宽。只使用CSS，是否可以将DIV和段落缩小到图像的宽度？

JSFiddle这里

我的例子'试图在这里描述。

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


CSS

  div {
 display：inline-block; 
} 
  

解决方案

我永远会羞愧自己： http://jsfiddle.net/WM6hK/3/

  div {
 display：table; 
 border：1px solid red; 
 width：1％; 
} 
 
 p {
 border：1px solid blue; 
} 
  

The code below is a simplified version of my website. On my site, the image width varies from page to page and the text is around 100 words. That means the paragraph stretches the DIV to be wider than the image. Using only CSS, is it possible to shrink the DIV and the paragraph to the width of the image?

JSFiddle here

Example of what I'm trying to describe here. Top is what I'm getting, bottom is what I want.

HTML

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

CSS

div {
   display: inline-block;
   }

解决方案

And for doing anything table related I shall forever shame myself: http://jsfiddle.net/WM6hK/3/

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

p {
border: 1px solid blue;
}​

这篇关于缩小到适合的div和段落，基于图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！