首页 > 代码库 > css三栏布局
css三栏布局
这里自己总结2个比较容易的方法。
1、定位法
<div class="left">左</div> <div class="main">中</div> <div class="right">右</div>
*{ margin:0; padding:0; height:100%; } .left,.right{ position:absolute; top:0; background-color:green; height:100%; } .left{ left:0; width:100px; } .right{ right:0; width:200px; } .main{ margin:0 200px 0 100px; height:100%; background-color:blue; }
2、浮动法
<div class="left">左</div> <div class="right">右</div> <div class="main">中</div> //注意中间部分的位置 如果把div放在中间 浮动上不去
*{ margin:0; padding:0; height:100%; } .left{ background-color:green; float:left; width:100px; height:100%; } .right{ background-color:green; float:right; width:200px; height:100%; } .main{ margin:0 200px 0 100px; height:100%; background-color:blue; }
css三栏布局
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。