今天，我在刷面試題的時候，突然想到一道題：如何將一個頁面平均分成四個部分（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解決這種布局的小問題就顯得大材小用了。如果各位面試的時候遇到希望能夠有用！