美文网首页CSS
[CSS] 单列定宽的两列弹性布局

[CSS] 单列定宽的两列弹性布局

作者: 何幻 | 来源:发表于2016-03-07 07:17 被阅读36次

    (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;
    }
    

    相关文章

      网友评论

        本文标题:[CSS] 单列定宽的两列弹性布局

        本文链接:https://www.haomeiwen.com/subject/mjrnkttx.html