CSS两边固定中间自适应

最新推荐文章于 2024-08-24 21:17:20 发布

小墨宝

最新推荐文章于 2024-08-24 21:17:20 发布

阅读量188

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签：页面布局

本文链接：https://blog.youkuaiyun.com/qq_38935512/article/details/96977240

css 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了网页布局中的多种实用技巧，包括双飞翼布局、圣杯布局等传统方法，以及使用CSS calc()函数、border-box属性和Flexbox布局等现代技术手段。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.双飞翼布局

div:
		<div id="cont">
			<div class="center">111</div>
		</div>
		<div class="left"></div>
		<div class="right"></div>

css:
		#cont{
			padding-left:200px;
			padding-right:150px;
			background: #eeeeee;
		}
		.left{
			height: 100px;
			background: red;
			float: left;
			width: 200px;
			margin-left:-200px
		}
		.center{
			height: 100px;
			background: yellow;
			width: 100%;
			float: left;
		}
		.right{
			height: 100px;
			background:blue;
			float: left;
			width: 150px;
			margin-right:-150px;
		}

效果图

2.圣杯布局

其实跟双飞翼布局大同小异

		<div id="cont">
			<div class="left"></div>
			<div class="center">111</div>
			<div class="right"></div>
		</div>
	left用到了
	position: relative;
	 right: 200px;