三栏布局

第一种方法:绝对定位

实现原理:两边固定,中间自适应。

详解:将两边的div设置为绝对定位,并设置宽度,中间设置margin-left为左边的宽度,margin-right为右边的宽度,就可以啦;

代码如下:

html,body{
	  margin:0;
	  padding:0;
	  height:100%;
	}
	div{
	  height:100%;
	}
	#left{
	  200px;
	  background-color:yellow;
	  position:absolute;
	  top:0;
	  left:0;
	}
	#main{
	  background-color:aqua;
	  margin-left:200px;
	  margin-right:300px;
	}
	#right{
	  300px;
	  background-color:orange;
	  position:absolute;
	  top:0;
	  right:0;
	}

<div id = "left">
</div>
<div id = "main">
</div>
<div id = "right">
</div>
原文地址:https://www.cnblogs.com/xiaojianwei/p/10126425.html