三栏布局之绝对定位布局

代码

HTML：

<section class="layout absolute">
	<article class="left-center-right">
		<div class="left"></div>
		<div class="center"></div>
		<div class="right"></div>
	</article>
</section>

这里三个div的顺序就和浮动布局不一样了，是按照从左到右的顺序写的。

CSS:

.absolute .left-center-right{
	position: relative; // 绝对定位的参照物是离它最近的已定位的祖先元素，所有添加这个属性
}
.absolute .left-center-right>div {
	position: absolute;
}
.absolute .left {
	left: 0;
}
.absolute .center {
	left: 300px; // 这里两个属性很关键，是决定中间宽度自适应关键，缺一不可
	right: 300px;
}
.absolute .right{
	right: 0;
}

优点

绝对定位布局设置很快捷，也很方便，也不容易出现问题。

缺点

由于是决定定位是脱离文档流的，意味着这些后代元素也会脱离文档流，会导致这种方法的有效性和可使用性是比较差的， 我是不经常使用。

适用场景

暂无，这是一个缺点大于优点的布局。