首页 > 代码库 > 三栏布局方法
三栏布局方法
1.浮动法,左列左浮动,右列右浮动,插入主体。中间内容#main必须要在最后加入,#main占一行会影响后面的浮动元素
html,body{ margin: 0; height: 100%; } #left{ width: 120px; float: left; height: 100%; background-color: grey; } #right{ width: 200px; float:right; height: 100%; background-color: grey; } #main{ background-color: skyblue; margin: 0 220px 0 140px; height:100%; } <div id="left"></div> <div id="right"></div> <div id="main">主体</div>
2.margin负值法,每个盒子都向一边浮动,通过负margin把盒子拉到左侧,先放中间的盒子
body,html{ height: 100%; margin: 0; } #main{ float: left; width: 100%; height: 100%; } #content{ margin: 0 220px 0 140px; background-color: skyblue; height: 100%; } #left{ float: left; width: 120px; height: 100%; margin-left: -100%; background-color: grey; } #right{ float: left; width: 200px; height: 100%; margin-left: -200px; background-color: grey; } <div id="main"> <div id="content"></div>//留空位给左右两列 </div> <div id="left"></div> <div id="right"></div>
3.绝对定位,左右两列绝对定位,中间用margin撑开距离。最容易理解
4.flex布局,最简单
body,html{ height: 100%; margin: 0; } #box{ height: 100%; width: 100%; display: flex; } #left{ width: 120px; background-color: grey; height: 100%; } #main{ flex:1; background-color: skyblue; height: 100%; margin:0 20px; } #right{ width: 200px; background-color: grey; height: 100%; }
三栏布局方法
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。