zoukankan      html  css  js  c++  java
  • flex左右布局 左边固定 右侧自适应

    flex左右布局

    左边固定 右侧自适应

    想要保证自适应内容不超出容器怎么办。
    通过为自适应的一侧设置 0;或者overflow: hidden;解决。

    首先实现标题的布局,也很简单:

    <div class="item">
        <div class="l">LEFT</div>
        <div class="r">
            <div class="title">OMG OMG OMG OMG OMG OMG OMG OMG OMG OMG OMG OMG OMG OMG OMG OMG OMG OMG OMG OMG OMG OMG</div>
            <div class="content">
                RIGHT FULL
            </div>
        </div>
    </div>
    
    .item {
        display: flex;
    }
    .item .l {
         240px;
        min- 240px;
        background-color: #ff5f00;
    }
    .item .r {
        background-color: mediumseagreen;
        flex-grow: 1;
        padding: 20px;
    }
    .item .r .content {
         100%;
        word-break: break-all;
    }
    .item .r .title {
        font-weight: bolder;
        font-size: 1.4em;
         100%;
        /*overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;*/
    }
    
    let str = '';
    for (var i = 0; i < 1000; i++) {
        str += ('' + Math.random().toString().substr(2, 5));
    }
    document.querySelector('body > div.item > div.r > div.content').innerHTML = str;
    

    预览发现基本符合预期:

    这时如果想要标题不换行,超出省略号;将CSS中注释的代码取消注释,会发现,内容将容器撑开,出现了横向滚动条,这不是我们想要的。

    要解决这个问题,可以:

    .item .r {
        background-color: mediumseagreen;
        flex-grow: 1;
        padding: 20px;
        /*增加一个*/
         0;
    }
    

    或者:

    item .r {
        background-color: mediumseagreen;
        flex-grow: 1;
        padding: 20px;
        /*增加一个*/
        overflow: hidden;
    }
    

    也可以达到预期。

    The end...Last updated by Jehorn, 2:55 PM, Thursday, May 9, 2019

  • 相关阅读:
    文件上传漏洞之js验证
    文件上传漏洞靶机upload-labs(1到10)
    URI/URL/URN都是什么
    解压jdk报错gzip: stdin: not in gzip format
    burpsuite常见问题
    C/C++字符串反转的N种方法
    转 二叉树之Java实现二叉树基本操作
    MySQL 面试基础
    转 MySQL中的行级锁,表级锁,页级锁
    MySQL问题排查工具介绍
  • 原文地址:https://www.cnblogs.com/jehorn/p/10838482.html
Copyright © 2011-2022 走看看