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


    在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>
  • 相关阅读:
    Java 几个权限关键字
    Java变量的定义
    Hibernate反射DAO模式
    BroadcastReceiver与Notification的综合应用自定义Action的调用方式
    SEO优化技术之关键字
    中软国际助力四所高校建设国家级大学生校外实践教育基地
    讲师团队的培养
    IT与学习
    程序员,你的粮草何在?
    如何更好的学好Linux操作系统
  • 原文地址:https://www.cnblogs.com/linxuanchen/p/2524334.html
Copyright © 2020-2023  润新知