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

今天药忘吃喽~ 2024-04-19 13:30 93阅读 0赞

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

## 方法一：左浮动+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>

效果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pZXZlcg_size_16_color_FFFFFF_t_70 2][]

##  ##

参考链接：

[左侧固定，右侧自适应的布局方案][Link 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pZXZlcg_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/15530f77217541c8bbaaf393387c08da.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pZXZlcg_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/fbb220a61f1347fb85024d21b75a53ad.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pZXZlcg_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/43002899381a4a70b5e777500eda0c4c.png
[Link 1]: https://www.tuicool.com/articles/AzMbui3