一，左侧div，float设为left，右侧div设置margin-left属性为左侧div的宽度，外div清除浮动
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 </head>
7 <style type="text/css">
8 *{margin:0;padding: 0;}
9 body,html{height: 100%;}
10 .container{
11 width: 1000px;
12 margin:0 auto;
13 background: #c6c;
14 overflow: hidden;
15 height: 100%;
16 }
17 .side{
18 width: 200px;
19 background: #c66;
20 height: 100%;
21 float: left;
22 /*解决IE6的3px-Bug*/
23 /*IE6下当浮动元素与非浮动元素相邻时，3px的Bug就会出现，它会偏移3像素。*/
24 _margin-right: -3px;
25 }
26 .main{
27 background: #6c6;
28 height: 100%;
29 margin-left: 200px;
30 }
31 </style>
32 <body>
33 <div class="container">
34 <div class="side">side</div>
35 <div class="main">main</div>
36 </div>
37 </body>
38 </html>
二，左侧div，float设为left，右侧div设置margin-left属性为左侧div的宽度，外div清除浮动，设置为相对定位，右侧设置绝对定位，宽度100%。（此方法代码比一多了好多代码）
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 </head>
7 <style type="text/css">
8 .container{width: 1000px;margin:0 auto;background: #c6c;position: relative;overflow: hidden;}
9 .side{width: 200px;background: #c66;height: 500px;float: left;}
10 .main{background: #6c6;height: 500px;margin-left: 200px;position: absolute;top:0;width: 100%;}
11 </style>
12 <body>
13 <div class="container">
14 <div class="side">side</div>
15 <div class="main">main</div>
16 </div>
17 </body>
18 </html>
3.左侧绝对定位
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 </head>
7 <style type="text/css">
8 .container{
9 width: 1000px;
10 margin:0 auto;
11 background: #c6c;
12 position: relative;
13 }
14 .side{
15 width: 200px;
16 background: #c66;
17 height: 500px;
18 position: absolute;
19 top:0;
20 left: 0;
21 }
22 .main{background: #6c6;height: 500px;margin-left: 200px;}
23 </style>
24 <body>
25 <div class="container">
26 <div class="side">side</div>
27 <div class="main">main</div>
28 </div>
29 </body>
30 </html>
时间： 2024-11-09 08:00:01