zoukankan      html  css  js  c++  java
  • css实现左边div固定宽度,右边div自适应撑满剩下的宽度

    (1)使用float

    <div class="use-float">
        <div></div>
        <div></div>
    </div>
    .use-float>div:first-child{
        width:100px;
        float:left;
    }
    .use-float>div:last-child{
        overflow:hidden;
    }

    ------------------------------------------------------------------------------------------------------------------------------

    (2)使用table

    <table class="use-table">
        <tr>
            <td></td>
            <td></td>
        </tr>    
    </table>
    .use-table{
        border-collapse:collapse;
        width:100%;
    }
    .use-table>tbody>tr>td:first-child{
        width:100px;
    }

    -----------------------------------------------------------------------------------------------------------------------------

    (3)用div模拟table

    <div class="use-mock-table">
        <div></div>
        <div></div>
    </div>
    .use-mock-table{
        display:table;
        width:100%;
    }
    .use-mock-table>div{
        display:table-cell;
    }
    .use-mock-table>div:first-child{
        width:100px;
    }

    -----------------------------------------------------------------------------------------------------------------------------

    (4)使用flex

    <div class="use-flex">
        <div></div>
        <div></div>
    </div>
    .use-flex{
        display:flex;
    }
    .use-flex>div:first-child{
        flex:none;
        width:100px;
    }
    .use-flex>div:last-child{
        flex:1;
    }
  • 相关阅读:
    什么是ETL?5分钟看完秒懂
    横向滚动 css
    解决echarts中横坐标值显示不全(自动隐藏)问题
    Echarts
    post 二进制流下载文件
    如何停止foreach
    日期格式 js
    cookie 属性
    HTML5 file对象和blob对象的互相转换
    前端图片压缩
  • 原文地址:https://www.cnblogs.com/watermelonban/p/7668197.html
Copyright © 2011-2022 走看看