CSS | 自适应两栏布局方法

html代码:

<div class="main">
<div class="left" style="background: #00FF7F; width: 200px; min-height: 200px;">固定宽度</div>
<div class="right" style="background: #87CEEB;min-height: 300px;">自适应区域</div>
</div>

1.浮动+margin

第一种: 左侧栏固定宽度向左浮动,右侧主要内容则用margin-left留出左侧栏的宽度,默认宽度为auto,自动填满剩下的宽度。
.left{ float: left;}
.right{ margin-left: 200px;}

2.绝对定位

第二种:左边绝对定位(脱离文档流,不占位置),右侧margin-left流出左侧栏宽度
.left{ position: absolute;}
.right{margin-left: 200px;}
缺点:
使用了绝对定位,若是用在某个div中,需要更改父容器的position。
没有清除浮动的方法,若左侧盒子高于右侧盒子,就会超出父容器的高度。因此只能通过设置父容器的min-height来放置这种情况。

3.float+calc()函数

第三种:左侧float、右侧float+calc()计算属性
.left{ float: left;}
.right{float:right; width:calc(100%-200px);}

4.float+BFC

第四种:float+BFC BFC区域不会与float元素区域重叠
.left{ float: left;}
.right{overflow:hidden;}

5.flex

第五种:flex
.main{ display: flex;}
.right{flex: 1;}
上一篇:OSG中相机参数的更改


下一篇:(五)u-boot2013.01.01 for TQ210:《移植前的准备及u-boot初编译》