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

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方法的兼容性不强。

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/betty13006159467/article/details/79959149
个人分类: 前端 css
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭