• 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;
    }
  • 相关阅读:
    第二篇 Flask 中的 Render Redirect HttpResponse
    第一篇 你好,我叫Flask
    redis发布订阅
    redis学习
    mysql+centos7+主从复制
    Linux系统基础优化及常用命令
    vim与程序员
    Shell基本命令
    js bom和dom
    javaScript基础
  • 原文地址:https://www.cnblogs.com/watermelonban/p/7668197.html
Copyright © 2020-2023  润新知