你的位置:首页 > 网页设计

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