css笔记：如何将一个页面平均分成四个部分？

今天，我在刷面试题的时候，突然想到一道题：如何将一个页面平均分成四个部分（div）呢？其实难度也不大，于是直接上代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>将页面平均分成四部分</title>
 6     <style type="text/css">
 7         *{
 8             margin: 0;
 9             padding: 0;
10         }
11         .main{
12             width: 100%;
13             height: 100%;
14             position: absolute;
15         }
16         .quarter-div{
17             width: 50%;
18             height: 50%;
19             float: left;
20         }
21         .blue{
22             background-color: #5BC0DE;
23         }
24         .green{
25             background-color: #5CB85C;
26         }
27         .orange{
28             background-color: #F0AD4E;
29         }
30         .yellow{
31             background-color: #FFC706;
32         }
33     </style>
34 </head>
35 <body>
36     <div class="main">
37         <div class="quarter-div blue"></div>
38         <div class="quarter-div green"></div>
39         <div class="quarter-div orange"></div>
40         <div class="quarter-div yellow"></div>
41     </div>
42 </body>
43 </html>

效果图如上。从代码上看，就是先确定一个占满全屏的div，并设置其position：absolute，而它的四个子div由于左浮动便自动浮动到相应的位置。除了这种方法，当然还有其他的方法可以解决，如果用css无非还是position的absolute和relative，如果用js解决这种布局的小问题就显得大材小用了。如果各位面试的时候遇到希望能够有用！

posted @ 2016-04-13 16:31  高小斯  阅读(15278)  评论(4)  编辑  收藏  举报