码迷,mamicode.com
首页 > 其他好文 > 详细

圣杯布局

时间:2019-06-30 15:44:01      阅读:106      评论:0      收藏:0      [点我收藏+]

标签:main   contain   nbsp   左边栏   gre   html   container   add   使用   

 1 (没有flex之前)
 2 <!DOCTYPE html>
 3 <html lang="en">
 4 
 5 <head>
 6     <meta charset="UTF-8">
 7     <title></title>
 8     <style>
 9         body {
10             margin: 0;
11             padding: 0;
12             color: #fff;
13         }
14 
15         /*
16         1)设置父元素container的位置
17         2)将主体部分的三个子元素都设置左浮动
18         3)设置main宽度为width:100%,让其单独占满一行
19         4)设置left和right 负的外边距
20         5)使用相对定位移动left和right到对应的位置
21         */
22 
23         .container {
24             min-width: 400px;
25             height: 200px;
26             background-color: greenyellow;
27             /*腾出位置  放置左右*/
28             padding: 0 200px;
29         }
30 
31         .left,
32         .right {
33             width: 200px;
34             height: 200px;
35             background-color: red;
36             float: left;
37         }
38 
39         .main {
40             width: 100%;
41             height: 200px;
42             background-color: blue;
43             float: left;
44         }
45 
46         .left {
47             margin-left: -100%;
48             /* 中间的宽度 */
49             position: relative;
50             /* 自身的宽度 */
51             left: -200px;
52         }
53 
54         .right {
55             /* 被宽度挤下来了 */
56             margin-left: -200px;
57             position: relative;
58             right: -200px;
59         }
60     </style>
61 </head>
62 
63 <body>
64     <!--容器-->
65     <div class="container">
66         <div class="main">
67             中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏
68         </div>
69         <div class="left">左边栏</div>
70         <div class="right">右边栏</div>
71     </div>
72 </body>
73 
74 </html>

 

圣杯布局

标签:main   contain   nbsp   左边栏   gre   html   container   add   使用   

原文地址:https://www.cnblogs.com/zhangzhengyang/p/11110010.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!