標籤：head main 一個 float code padding cti alt title
在項目中遇到需求，資料監控頁面需要同時顯示4個板塊內容，如：
CSS 如何將一個頁面平均分成四個部分（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: 50%; height: 50%; float: left; } .blue{ background-color: #5BC0DE; } .green{ background-color: #5CB85C; } .orange{ background-color: #F0AD4E; } .yellow{ background-color: #FFC706; } </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 class="quarter-div yellow"></div> </div></body></html>
如下：
由於板塊內部架構組建圖表的浮動問題，用上面方法會出問題，改進方法如下
CSS樣式如下：
/*將頁面分為4個部分*/.clearfix:before,.clearfix:after{ display:table; content:"";}.clearfix:after{ clear:both;}.clearfix{ *zoom:1;}.thewrap{ margin-top: 16px; padding-left: 20px; padding-right: 20px; width: 100%; box-sizing: border-box; overflow: auto;}.quarter-div{ width: 50%; box-sizing: border-box; float: left; overflow: auto;}
JS代碼：
<script> $(function(){ var bodyH = $(window).height(); console.log(bodyH); var h = bodyH/2-70; $(".quarter-div .panel-body").height(h); });</script>
CSS 將一個頁面平均分成四個部分（div）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
