本篇教程介绍了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知识!