实现三栏布局的5种方法

最新推荐文章于 2024-06-29 00:10:00 发布

chaojixiaosong-

最新推荐文章于 2024-06-29 00:10:00 发布

阅读量333

点赞数

文章标签： css3 css

本文链接：https://blog.csdn.net/m0_48999777/article/details/119429620

版权

本文详细介绍了实现三栏布局的五种常见方法，包括float/margin、relative/absolute定位、table-cell、flexbox和grid布局。每种方法都有其特点和适用场景，例如float/margin适用于简单布局，而flex和grid则提供了更强大的自适应能力。通过这些方法，开发者可以灵活地创建左右两栏宽度固定，中间栏宽度自适应的网页布局。

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

三栏布局一般指左右两栏宽度固定，中间栏宽度自适应的布局。

1.float/margin实现三栏布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用float/margin实现三栏布局</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			body{
				min-width: 1000px;
			}
			.content{
				min-height: 500px;
				color: white;
				font-size: 26px;
			}
			.left{
				width: 200px;
				float: left;
				background-color: green;
			}
			.right{
				width: 300px;
				float: right;
				background-color: seagreen;
			}
			.center{
				margin: 0 300px 0 200px;
				background-color: darkgreen;
			}
		</style>
		
	</head>
	<body>
		<div class="container">
			<div class="content left">left</div>
			<div class="content right">right</div>
			<!-- center只能放到最后，也就意味着最后渲染 -->
			<div class="content center">center</div> 
		</div>
	</body>
</html>

2.relative和absolute定位实现三栏布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>relative和absolute定位实现三栏布局</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			.container{
				position: relative;
			}
			.content{
				color: white;
				font-size: 26px;
				min-height: 500px;
				position: absolute;
				top:0;
			}
			.left{
				width: 200px;
				left: 0;
				background-color: #006400;
			}
			.right{
				width: 300px;
				right: 0;
				background-color: #2E8B57;
			}
			.center{
				left: 200px;
				right: 300px;
				background-color: #008000;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<!-- center位置可以随意放，所以选择放在第一个，可以优先渲染 -->
			<div class="content center">center</div>
			<div class="content left">left</div>
			<div class="content right">right</div>
		</div>
	</body>
</html>

3.table-cell实现三栏布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>table-cell实现三栏布局</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			.content{
				/* 这里要使用height才能生效，使用min-height不生效 */
				height: 500px;
				color: white;
				font-size: 26px;
				display: table-cell;
			}
			.left{
				/* 这里要使用min-width才能生效，使用width不生效 */
				min-width: 200px;
				background-color: #006400;
			}
			.right{
				min-width: 300px;
				background-color: #2E8B57;
			}
			.center{
				width: 100%;
				background-color: #008000;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<!-- center只能放中间 -->
			<div class="content left">left</div>
			<div class="content center">center</div>
			<div class="content right">right</div>
		</div>
	</body>
</html>

4.flex实现三栏布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>flex实现三栏布局</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			body {
			    min-width: 1000px;
			}
			.container{
				display: flex;
				justify-content: space-between;
			}
			.content{
				min-height: 500px;
				color: white;
				font-size: 26px;
			}
			.left{
				order: 1;
				width: 200px;
				background-color: #2E8B57;
			}
			.right{
				order: 3;
				width: 300px;
				background-color: #006400;
			}
			.center{
				order: 2;
				flex: 1;
				background-color: #008000;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<!-- center放任意均可，所以选择放在第一个，可以优先渲染 -->
			<div class="content center">center</div>
			<div class="content left">left</div>
			<div class="content right">right</div>
		</div>
	</body>
</html>

5.grid实现三栏布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>grid实现三栏布局</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			body {
			    min-width: 1000px;
			}
			.container{
				display: grid;
				width: 100%;
				/* 设置三列宽度 中间auto自适应 */
				grid-template-columns:200px auto 300px;
				
			}
			.content{
				min-height: 500px;
				color: white;
				font-size: 26px;
			}
			.left{
				grid-row: 1/2;
				grid-column: 1/2;
				background-color: #006400;
			}
			.right{
				grid-row: 1/2;
				grid-column: 3/4;
				background-color: #008000;
			}
			.center{
				grid-row: 1/2;
				grid-column: 2/3;
				background-color: #2E8B57;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<!-- center放任意均可，所以选择放在第一个，可以优先渲染 -->
			<div class="content center">center</div>
			<div class="content left">left</div>
			<div class="content right">right</div>
		</div>
	</body>
</html>