三列宽度自适应布局

效果如图
在这里插入图片描述根据浏览器窗口变换宽度可自动变化

代码如下:

html,body{
 			width: 100%;
 			margin: 0;
 		}
 		h3{
 			height: 100px;
 			margin:20px 0;
 		}
 		#left,#right{
 			width: 200px;
 			height: 200px;
 			position: absolute;
 			top: 120px;
 			background: pink;
 		}
 		#left{
 			left:0;
 		}
 		#right{
 			right:0;
 		}
 		#center{
 			height: 200px;
 			background: blue;
 			margin: -20px 210px;

 		}
 
<div id="left">左边</div>
<div id="center">中间</div>
<div id="right">右边</div>

版权声明:本文为nn_nn_n原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。