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;
    }
  • 相关阅读:
    jquery笔记
    css选择器
    Linq 巧用 Max,Sum
    Linq Aggregate
    Linq 对象的比较 Contains,Max
    Linq SelectMany 交叉连接
    JQ 标签相关知识
    C# HttpClient设置cookies的两种办法 (转发)
    使用 HttpClient 请求 Web Api
    MySQL 避免重复数据的批量插入与批量更新
  • 原文地址:https://www.cnblogs.com/watermelonban/p/7668197.html
Copyright © 2011-2022 走看看