在工作中经常会出现需要讲一个div等分为几部分的需求，现整理方法如下：
1、借助设置百分比实现均分div，代码如下所示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>将页面平均分成四部分</title> <style type="text/css"> *{ margin: 0; padding: 0; } .main{ width: 100%; height: 100%; position: absolute; } .quarter-div{ width: 33%; height: 33%; float: left; } .blue{ background-color: #5BC0DE; } .green{ background-color: #5CB85C; } .orange{ background-color: #F0AD4E; } </style> </head> <body> <div class="main"> <div class="quarter-div blue"></div> <div class="quarter-div green"></div> <div class="quarter-div orange"></div> </div> </body> </html>页面显示如下图所示：
目前div是按照横向（x轴）等分的，若需要按照纵向（y轴）等分，只需要去掉quarter-div类中的float：left属性设置即可（因为div本来就是块级元素，故会每个占用一行显示，设置float：left会使其显示在一行，因此需要纵向等分的话，则不用设置float：left，按照原始显示即可）。页面显示如下所示：
目前整理方法仅此一个，日后有更好的方法在进行更新！还望大家多多指教！
参考文献：https://blog.csdn.net/weixin_34174105/article/details/93446871
