页面布局之左侧固宽，右侧自适应

最新推荐文章于 2020-07-23 18:56:18 发布

原创最新推荐文章于 2020-07-23 18:56:18 发布 · 997 阅读

0 ·

CC 4.0 BY-SA版权

前端同时被 2 个专栏收录

22 篇文章

订阅专栏

css

7 篇文章

订阅专栏

本文介绍了五种实现CSS两栏布局的方法，包括浮动加margin、绝对定位加margin、table-cell布局、flex布局以及浮动结合BFC的方式。每种方法都详细讲解了其原理和适用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

1、固定宽度区浮动，自适应区设置margin
给左边的固定宽度区left浮动并设置一个宽度，右边的自适应区right只设置margin值，假设right的宽度是100%，那么设置margin后，它得宽度就变为100%-margin；left发现自己的宽度可以和right挤在同一行，它就浮动上来了。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-type" type="text/html; charset=utf-8" >
        <style type="text/css">
            #main{
                overflow:hidden;/*清除浮动*/
            }
            #left{
                float:left;
                width:300px;
                background:red;
            }
             #right{
                margin-left:310px;
                background:#666;
           }
            #footer{
                height:50px;
                background:#ccc;
                margin-top:10px;
            }
        </style>
        <title>宽度自适应</title>
    </head>
    <body>
        <div id="main">
            <!--这种方法必须把固定宽度区写在前面，否则布局不了-->
            <div id="left" style="height:400px;">content我是固定宽度区</div>
            <div id="right" style="height:300px;">sider我是自适应区</div>

        </div>
        <div id="footer">footer</div>
    </body>
</html>

这里写图片描述

记得清除浮动，这样不管left和right谁更长，footer都不会错位，不会对布局造成影响；
但是，这种方法必须让固定宽度区写在自适应区前面。

<div id="main">
   <div id="left" style="height:300px;">left我是固定宽度区</div>
   <div id="right" style="height:400px;">right我是自适应区</div>
</div>

2、固定宽度区使用绝对定位，自适应区设置margin
若想把自适应区right写在前面，给right设置margin值，需要给left固定宽度区设置绝对定位，在此之前把父元素main设置为相对定位relative，让left的绝对定位是相对于main而不是相对于整个网页。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-type" type="text/html; charset=utf-8" >
        <style type="text/css">
            div{
                margin:0;
                padding:0;
            }
            #main{
                position:relative;
            }

            #left{
                position:absolute;
                top:0;
                left:0;
                width:300px;
                background:red;
            }
              #right{
                margin-left:310px;
                background:green;
           }

            #footer{
                height:50px;
                background:#ccc;
                margin-top:10px;
            }
        </style>
        <title>宽度自适应</title>
    </head>
    <body>
        <div id="main">
            <div id="right" style="height:300px;">right我是自适应区</div>
            <div id="left" style="height:400px;">left我是固定宽度区</div>
        </div>
        <div id="footer">footer</div>
    </body>
</html>

这里写图片描述

固定宽度的绝对定位只能满足自己，对其他的毫无益处，footer不受left固定高度绝对定位的影响，只受right自适应区的影响。
3、标准浏览器方法
w3c标准提供的制作这种自适应宽度的标准方法：把main设为display:table并指定宽度100%,然后把left和right设为display:table-cell;然后只给left指定一个宽度，那么right的宽度就变成自适应了。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-type" type="text/html; charset=utf-8" >
        <style type="text/css">
            #main{
                display:table;
                width:100%;
            }
            #left{
                display:table-cell;
                width:300px;
                background:red;
            }
              #right{
                display:table-cell;
                background:green;
           }
            #footer{
                height:50px;
                background:#ccc;
                margin-top:10px;
            }
        </style>
        <title>宽度自适应</title>
    </head>
    <body>
        <div id="main"> 
            <div id="left" style="height:200px;">content我是固定宽度区</div>
            <div id="right" style="height:300px;">sider我是自适应区</div>
        </div>
        <div id="footer">footer</div>
    </body>
</html>

这里写图片描述
这种方法对IE7及之前版本无效，若不考虑IE7及其之前版本则使用标准方法，若不考虑固定宽度区和自适应区的顺序，则使用第一种方法。

4、利用flex布局
将父元素设为display:flex;
固宽的子元素设为flex:0 0 300px;
自适应的子元素设为flex:1。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" >
    <style type="text/css">
        #main{
            display:flex;
        }
        #left{
            flex:0 0 300px;
            background:red;
        }
        #right{
            flex:1;/*分配剩下的所有空间*/
            background:#666;
        }
        #footer{
            height:50px;
            background:#ccc;
            margin-top:10px;
        }
    </style>
    <title>宽度自适应</title>
</head>
<body>
<div id="main">
    <div id="left" style="height:400px;">content我是固定宽度区</div>
    <div id="right" style="height:300px;">sider我是自适应区</div>

</div>
<div id="footer">footer</div>
</body>
</html>

这里写图片描述
flex方法的兼容性不强。

5、使用浮动和BFC相结合
左侧固定内容区使用浮动，右侧自适应区触发BFC，普通流体元素BFC后，为了和浮动元素不产生任何交集，顺着浮动边缘形成自己的封闭上下文。也就是，虽然不与浮动交集，自动退避浮动元素宽度的距离，但，本身作为普通元素的流动性依然存在，反映在布局上就是自动填满除去浮动内容以外的剩余空间。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-type" type="text/html; charset=utf-8" >
        <style type="text/css">
            #main{
                overflow:hidden;/*清除浮动*/
            }
            #left{
                float:left;
                width:300px;
                background:red;
            }
             #right{
                background:#666;
                overflow:hidden;/*触发BFC*/
           }
            #footer{
                height:50px;
                background:#ccc;
                margin-top:10px;
            }
        </style>
        <title>宽度自适应</title>
    </head>
    <body>
        <div id="main">
            <!--这种方法必须把固定宽度区写在前面，否则布局不了-->
            <div id="left" style="height:400px;">content我是固定宽度区</div>
            <div id="right" style="height:300px;">sider我是自适应区,我触发了BFC</div>

        </div>
        <div id="footer">footer</div>
    </body>
</html>

这里写图片描述
这种方法实现的两栏布局，无需知道浮动区元素的宽度，可以整站大规模应用。
但是要实现两栏的间距，需要使用浮动区的margin-right或者padding-right。

#left{
     float:left;
     width:300px;
     background:red;
     margin-right:20px;
     /*padding-right:20px;*/
}