两列布局——左侧宽度固定，右侧宽度自适应的实现方法

左侧宽度固定，右侧宽度自适应的实现方法

方法一：左浮动+margin-left

让两个元素在同一行显示首先想到的就是浮动，首先可以让左侧元素浮动,使其脱离文档流,右边的元素加上margin-left,其值等于左边元素的宽度，这时右侧元素紧挨左侧元素，实现左侧宽度固定，右侧宽度自适应效果。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .left {
            width: 300px;
            height: 100px;
            background-color: pink;
            float: left;
        }
        .right {
            height: 200px;
            background-color: skyblue;
            margin-left: 300px;
        }
    </style>
</head>
<body>
        <div class="left">左边固定</div>
        <div class="right">右边自适应</div>
</body>
</html>

实现效果:

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pZXZlcg_size_16_color_FFFFFF_t_70

方法三:两个float方案

单个元素浮动可以实现，让两个容器同时浮动当然也可以实现，但是右边元素在浮动的时候宽度是依据内容决定的，因此我们需要为右边的元素设置一个宽度，可以用calc函数进行解决。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .left {
            width: 300px;
            height: 100px;
            background-color: pink;
            float: left;
        }
        .right {
            height: 200px;
            background-color: skyblue;
            float: left;
            width: calc(100% - 300px);
        }
    </style>
</head>
<body>
    <div class="container">
            <div class="left">左边固定</div>
            <div class="right">右边自适应</div>
    </div>
</body>
</html>

效果如下:

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pZXZlcg_size_16_color_FFFFFF_t_70 1

方法三:absolute+margin-left

此方法相同于方法一,都是让左边的盒子脱离标准流,右边盒子添加margin-left(其值等于左边盒子的宽度)。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .left {
            width: 300px;
            height: 100px;
            background-color: pink;
            position: absolute;
        }
        .right {
            height: 200px;
            background-color: skyblue;
            margin-left: 300px;
        }
    </style>
</head>
<body>
    <div class="container">
            <div class="left">左边固定</div>
            <div class="right">右边自适应</div>
    </div>
</body>
</html>