记录--CSS3实现左右两栏宽度固定，中间自适应布局

最新推荐文章于 2022-04-26 17:06:40 发布

森岛。

最新推荐文章于 2022-04-26 17:06:40 发布

阅读量456

点赞数

分类专栏： html+css 文章标签： html

本文链接：https://blog.csdn.net/C_MP_/article/details/100904355

版权

本文详细介绍了如何使用CSS3来创建一个布局，其中左侧和右侧栏的宽度固定，而中间栏根据内容自适应宽度。通过设置盒模型、display属性和flexbox，实现了灵活且响应式的页面布局。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--<script src="tetx.js"></script>-->
		<!--display: flex; css3新特性，结合flex: 1;使得中间的盒子
		随着屏幕的宽度自适应-->
		<style>
			body{
				margin: 0px;

			}
			.container{
				width: 100%;
				height: 950px;
				display: flex; 
			}
			.left{
				background: blue;
				width: 100px;
				height: 100%;
				float: left;
				
			}
			.right{
				background: green;
				width: 100px;
				height: 100%;
				float: right;

			}
			.center{
				background: pink;
				height: 100%;
        float: left;
				flex: 1;
			}
			h1{
				color: #FFFFFF;
				margin: 0px;
			}
			p{
				color: #FFFFFF;
				margin: 0px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="left">侧边栏100px</div>
			<div class="center">
				<h1>主体内容宽度自适应<