在web开发中，我们经常需要做左图片右文字的排版方式。传统的做法是2个DIV浮动，并用width调整大小，左边放图右边放文字来实现下面的效果
但这样做就会出现问题，我们每次都得去定义右侧文字部分浮动的宽度，而不能实现自动适应宽度的效果。
今天再做一个项目的时候突发奇想，结果实现了右侧文字自动适应宽的的效果。如图
不论怎么改变父容器的宽度，文字总是自动去适应宽度的
现在拿出来与大家一起分享，希望能起到作用。
实现的原理很简单，父元素div设定一个跟图片大小一致的边距，然后让其相对定位。内部图片采用绝对定位，让坐标固定在左上角，右边的东西就随意了。
就这么简单～
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> html, body { font-size: 12px; cursor: default; padding: 10px; margin: 0; } div.status { padding-left: 60px; position: relative; margin-bottom: 10px; } div.status p { margin: 0 0 5px 0; line-height: 1.5; padding: 0; } div.status p span.name { color: #369; } div.status p.status-cotent { color: #333; } div.status .face { position: absolute; left: 0; top: 0; } div.status div.repost { border: solid 1px #ACD; background: #F0FAFF; padding: 10px; } div.repost p.repost-cotent { color: #666 !important; } </style> </head> <body> <div class="status"> <img src="http://tp4.sinaimg.cn/1987012015/50/5607856668/1" alt="人名字" class="face" /> <p class="status-cotent"><span class="name">这是说的内容</span>：甜美范单鞋、凉鞋、小高跟鞋~这几家款式全 淘单鞋的亲赶紧收了。甜美范单鞋、凉鞋、小高跟鞋~这几家款式全 淘单鞋的亲赶紧收了甜美范单鞋、凉鞋、小高跟鞋~这几家款式全 淘单鞋的亲赶紧收了甜美范单鞋、凉鞋、小高跟鞋~这几家款式全 </p> <img src="http://ww2.sinaimg.cn/thumbnail/766f65afjw1dtf50slhz4j.jpg" alt="图片" class="inner-pic" /> </div> <div class="status"> <img src="http://tp4.sinaimg.cn/1987012015/50/5607856668/1" alt="人名字" class="face" /> <p class="status-cotent">这是说的内容：甜美范单鞋、凉鞋、小高跟鞋~这几家款式全 淘单鞋的亲赶紧收了。甜美范单鞋、凉鞋、小高跟鞋~这几家款式全 淘单鞋的亲赶紧收了甜美范单鞋、凉鞋、小高跟鞋~这几家款式全 淘单鞋的亲赶紧收了甜美范单鞋、凉鞋、小高跟鞋~这几家款式全 </p> <div class="repost"> <p class="repost-cotent"><span class="name">@这是说的内容</span>：甜美范单鞋、凉鞋、小高跟鞋~这几家款式全 淘单鞋的亲赶紧收了。甜美范单鞋、凉鞋、小高跟鞋~这几家款式全 淘单鞋的亲赶紧收了甜美范单鞋、凉鞋、小高跟鞋~这几家款式全 淘单鞋的亲赶紧收了甜美范单鞋、凉鞋、小高跟鞋~这几家款式全 </p> <img src="http://ww2.sinaimg.cn/thumbnail/766f65afjw1dtf50slhz4j.jpg" alt="图片" class="inner-pic" /> </div> </div> </body> </html>