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