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;
    }
  • 相关阅读:
    HDU 2955(01背包问题)
    POJ 2250(LCS最长公共子序列)
    POJ 3356(最短编辑距离问题)
    HDU 1069 Monkey and Banana(LIS最长上升子序列)
    POJ
    HDU 2955(0-1背包问题)
    HDU2602 (0-1背包问题)
    hdu1003 Max Sum(经典dp )
    C题
    D题(贪心)
  • 原文地址:https://www.cnblogs.com/watermelonban/p/7668197.html
Copyright © 2011-2022 走看看