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

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

 

posted @ 2012-05-29 17:43  林选臣  阅读(1518)  评论(1)  编辑  收藏  举报