三列宽度自适应布局

最新推荐文章于 2022-08-18 09:49:53 发布

nn_nn_n

最新推荐文章于 2022-08-18 09:49:53 发布

阅读量135

点赞数

本文链接：https://blog.csdn.net/nn_nn_n/article/details/100520220

版权

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

代码如下：

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>