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解决这种布局的小问题就显得大材小用了。如果各位面试的时候遇到希望能够有用！
转载于:https://www.cnblogs.com/gxsweb/p/5387651.html
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！