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解决这种布局的小问题就显得大材小用了。如果各位面试的时候遇到希望能够有用！