把一个页面进行四等分

来源：互联网发布：淘宝客qq群里的优惠券编辑：程序博客网时间：2024/05/17 22:06

今天，我在刷面试题的时候，突然想到一道题：如何将一个页面平均分成四个部分（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>

效果图如上。从代码上看，就是先确定一个占满全屏的div，并设置其position：absolute，而它的四个子div由于左浮动便自动浮动到相应的位置。除了这种方法，当然还有其他的方法可以解决，如果用css无非还是position的absolute和relative，如果用js解决这种布局的小问题就显得大材小用了。如果各位面试的时候遇到希望能够有用！

转载地址：https://www.cnblogs.com/gxsweb/p/5387651.html

阅读全文

'); })();