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

最新推荐文章于 2021-01-08 16:09:56 发布

weixin_30430169

最新推荐文章于 2021-01-08 16:09:56 发布

阅读量82

点赞数

原文链接：http://www.cnblogs.com/MissBean/p/buju.html

版权

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

转载于:https://www.cnblogs.com/MissBean/p/buju.html

weixin_30430169

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何布局左固定右边自适应的两列布局？

一，左侧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&lt...
复制链接

扫一扫