1. 首页
  2. SEO百科
  3. Web前端

布局之左侧固定,右侧自适应零基础入门_自适应基础指南

1,固定侧左浮动,右侧设置margin给左边的固定宽度区left浮动并设置一个宽度,右边的自适应区right只设置margin值,假设right的宽度是100%,那么设置margin后,它得宽度就变为100%-margin;left发现自己的宽度可以和right挤在同一行,它就浮动上来了 #main{overflow:hidden;/*清除浮动

布局之左侧固定,右侧自适应零基础入门

1,固定侧左浮动,右侧设置margin

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

布局之左侧固定,右侧自适应零基础入门_自适应基础指南


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<style>  
    #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,固定宽度区使用绝对定位,自适应区设置margin

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


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<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>
海计划公众号