利用flex实现图文混排

来源：互联网发布：软件逻辑架构图编辑：程序博客网时间：2024/06/17 11:28
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <meta name="viewport" content="width=device-width,initial-scale=1.0">    <style type="text/css">        *{margin:0; padding:0;}        .box{            overflow: hidden;            display: flex;            width:600px;            margin:0 auto;        }        .left{            flex: 0 0 100px;            height: 100px;            background: yellow;            margin-right:30px;        }        .right{            flex:1;            min-width: 0;            background: red;        }        .right p{            color: #999999;            font-size: 13px;            line-height: 1.2;            overflow: hidden;            text-overflow: ellipsis;            display: -webkit-box;            -webkit-box-orient: vertical;            -webkit-line-clamp: 2;  /*上面这是为了限制2行溢出出现...*/            word-break:break-all;  /*防止长英文单词导致的bug(撑宽父元素)*/        }        .title-box{  /*题目前面有个图标*/            display: flex;            overflow: hidden;        }        .brand{            position: relative;        }        .title{            flex:1;              word-break:break-all;                white-space:nowrap;          /* 不换行 */                overflow:hidden;               /* 内容超出宽度时隐藏超出部分的内容 */                text-overflow:ellipsis;   /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/        }    </style></head><body>    <div class="box">        <div class="left">左浮动</div>        <div class="right">            <div class="title-box"><span class="brand">!tubiao!</span><span class="title">左浮动左浮动左浮动左浮动左浮动浮动左浮动左浮动左浮动左浮浮动左浮动左浮动左浮动左浮浮动左浮动左浮动左浮动左浮浮动左浮动左浮动左浮动左浮</span></div>            <p>fsssssssssssssssssssssssssssssssssffffffffffffffffffffffffffffffffffffffffffffffddddddfffffffffffffffffffssssssssssssssssssssssssssssssssssweeeeeeeeeeeeeeeeeeeeeeeeeeee</p>        </div>    </div></body></html>
阅读全文
'); })();