利用flex实现图文混排


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <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>fsssssssssssssssssssssssssssssssssffffffffffffffffffffffffffffffffffffffffffffffddddddfffffffffffffffffffssssssssssssssssssssssssssssssssssweeeeeeeeeeeeeeeeeeeeeeeeeeeep>
        div>
    div>
body>
html>

<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Documenttitle>
    <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>sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssp>
            <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>

你可能感兴趣的:(css)