利用flex实现图文混排

最新推荐文章于 2021-06-04 20:27:24 发布

han_hanker

最新推荐文章于 2021-06-04 20:27:24 发布

阅读量2.1k

点赞数

分类专栏： css 文章标签： flex

css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
    *{
        margin:0;
        padding:0;
    }
    .wrapper{
        width:80%;
        margin: 0 auto;
        display: flex;
    }
    .img{
        flex: 0 0 100px;
        width:100px;
        height:100px;
        background: #66ccff;
    }
    .text{
        flex:1;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-width: 0;


    }
    .text p{
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        background: #66ccff;
    }
    .text p:nth-of-type(2){
        color: #e60000;
    }
</style>
</head>
<body>
    <div class="wrapper">
        <div class="img">

        </div>
        <div class="text">
            <p>和咯和咯和咯和咯和咯和咯和咯和咯和咯和咯和咯和咯和咯和咯和咯和咯和咯和咯</p>
            <p>和咯和咯和咯和咯和咯和咯和咯和咯和咯和咯和咯和咯和咯和咯和咯和咯和咯和咯</p>
            <p>sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</p>
            <p>和咯和咯和咯和咯和咯和咯和咯和咯和咯和咯和咯和咯和咯和咯和咯和咯和咯和咯</p>
        </div>
    </div>
    <hr />
    <div class="wrapper">
        <div class="img">

        </div>
        <div class="text">
            <p>和咯和咯和咯和咯和咯和咯和咯和咯和咯和咯和咯和咯和咯和咯和咯和咯和咯和咯</p>
            <p>和咯和咯和咯和咯和咯和咯和咯和咯和咯和咯和咯和咯和咯和咯和咯和咯和咯和咯</p>
            <p>和咯和咯和咯和咯和咯和咯和咯和咯和咯和咯和咯和咯和咯和咯和咯和咯和咯和咯</p>
            <p>和咯和咯和咯和咯和咯和咯和咯和咯和咯和咯和咯和咯和咯和咯和咯和咯和咯和咯</p>
        </div>
    </div>
</body>
</html>

han_hanker

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
利用flex实现图文混排

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;meta name="viewport" content="
复制链接

扫一扫