HTML+CSS入门如何将一个页面平均分成四个部分-职坐标

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

沉沙 2018-09-12 来源：阅读 8039 评论 0

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

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

数据监控页面需要同时显示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>