您的位置：首页 > Web前端

前端之-三列布局。顶部-底部-中间两侧固定。中间内容自适应

2017-05-17 14:43 603 查看 
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{margin: 0px;padding: 0px;}
.top{height: 100px;width:100%;float:left;background-color:gray;}
.main{height: 800px;width:100%; margin: 0 auto;background-color: yellow;float:left;}
.left{width: 100px;height:800px;background-color: blue;position: absolute;top: 100;left: 0;}
.middle{width:100%;height:800px;background-color: red;margin: 0 100px 0 100px;position: absolute;top: 100;}
.right{width: 100px;height:800px;background-color: blue;position: absolute;top: 100;right: 0;}
.footer{height: 60px;width:100%;float:left;background-color:green;}
</style>
</head>
<body>
<div class="top" >TOP</div>
<div class="main" >
<div class="left">LEFT</div>
<div class="middle" >MIDDLE</div>
<div class="right">RIGTH</div>
</div>
<div class="footer">
FOOTER
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航