如何布局左固定右边自适应的两列布局？

一，左侧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>

相关阅读:
Redis 连接命令
Redis 脚本
Redis 事务
Redis 发布订阅
Redis HyperLogLog
Redis 有序集合(sorted set)
Redis 集合(Set)
Redis 列表(List)
Redis 哈希(Hash)
特定消费者的限制流量

原文地址：https://www.cnblogs.com/MissBean/p/buju.html