当前位置:Gxlcms > html代码 > css笔记:如何将一个页面平均分成四个部分?-高小斯

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

时间:2021-07-01 10:21:17 帮助过:16人阅读

今天,我在刷面试题的时候,突然想到一道题:如何将一个页面平均分成四个部分(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解决这种布局的小问题就显得大材小用了。如果各位面试的时候遇到希望能够有用!

人气教程排行