不用浮动实现图文并列排版

晨曦之光 发布于 2012/06/06 15:58
阅读 143
收藏 0

在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 >

 


原文链接:http://www.cnblogs.com/linxuanchen/archive/2012/05/29/2524334.html
加载中
返回顶部
顶部