css左右布局，左侧固定，右侧自适应

实现布局的几种方法，见代码：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .content{
        width: 100%;
        height: 50px;
        border: solid 1px;
        margin-top: 10px;

    }
    .content div:first-child{
        background: red;
        height: 50px;
        width:50px;
    }
    .content div:last-child{
        background: green;
        height: 50px;
    }
    </style>
</head>
<body>
    <!--浮动-->
    <div class="content" >
        <div style="float: left;"></div>
        <div style="margin-left: 50px;"></div>
    </div>
    <!--绝对定位-->
    <div class="content" >
        <div style="position: absolute"></div>
        <div style="overflow:hidden;"></div>
    </div>
    <!--flex-->
    <div class="content" style="display:flex;">
        <div ></div>
        <div style="flex-grow: 1"></div>
    </div>
    <!--表格-->
    <table class="content" style="border-collapse: collapse;">
        <tr>
            <td style="width:50px;background:red;"></td>
            <td style="background:green;"></td>
        </tr>
    </div>
</body>
</html>

 

posted @ 2019-04-28 16:59  jadefan  阅读(1806)  评论(0)  编辑  收藏  举报