站内搜索

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