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

时间 2019-11-05

标签布局左侧固定右侧自适应栏目 CSS 繁體版

原文原文链接

(此文为转载，还有三个不经常使用方法在连接https://blog.csdn.net/betty13006159467/article/details/79959149)css

1，固定侧左浮动，右侧设置marginhtml

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

#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>

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

2,固定宽度区使用绝对定位，自适应区设置marginui

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

<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>