标签：布局 splay 插入 20px box 影响 定位 ack 简单
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%; }
标签：布局 splay 插入 20px box 影响 定位 ack 简单
原文地址：http://www.cnblogs.com/lee1993/p/6641323.html
