欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

css笔记:如何将一个页面平均分成四个部分? - 高小斯

程序员文章站 2022-05-11 22:13:53
...
今天,我在刷面试题的时候,突然想到一道题:如何将一个页面平均分成四个部分(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>

css笔记:如何将一个页面平均分成四个部分? - 高小斯

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