css布局实现左侧固定右侧自适应的4种方式

css布局实现左侧固定右侧自适应的4种方式

我们在左右布局的时候经常会碰到左侧宽度需要固定，右侧宽度自适应的场景，那么通过css怎么实现呢，下面介绍4种方式来实现这种效果。

一、浮动

<div class="content" >
   <div style="float: left;"></div>
   <div style="margin-left: 50px;"></div>
 </div>
<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>

二、绝对定位

<div class="content">
    <div style="position: absolute"></div>
    <div style="overflow:hidden;"></div>
</div>
<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>

三、flex

<div class="content" style="display:flex;">
    <div></div>
    <div style="flex-grow: 1"></div>
</div>
<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>

四、表格

<table class="content" style="border-collapse: collapse;">
    <tr>
        <td style="width:50px;background:red;"></td>
        <td style="background:green;"></td>
    </tr>
</table>
<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>