html页面分成上下部分,HTML+CSS入门 如何将一个页面平均分成四个部分

本篇教程介绍了HTML+CSS入门 如何将一个页面平均分成四个部分，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。

<

数据监控页面需要同时显示4个板块内容，如下图：

CSS 如何将一个页面平均分成四个部分(div)呢？

html>

将页面平均分成四部分

*{

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;

}

效果图如下：

由于板块内部框架生成图表的浮动问题，用上面方法会出问题，改进方法如下

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代码：

$(function(){

var bodyH = $(window).height();

console.log(bodyH);

var h = bodyH/2-70;

$(".quarter-div .panel-body").height(h);

});

本文由职坐标整理发布，欢迎关注职坐标WEB前端HTML/CSS频道，获取更多HTML/CSS知识！