CSS实现左中右三栏布局，中间自适应的三种方法

最新推荐文章于 2024-05-24 17:57:30 发布

自豪听我的

最新推荐文章于 2024-05-24 17:57:30 发布

阅读量1.5k

点赞数

分类专栏： css css常见问题

本文链接：https://blog.csdn.net/xYY_X_xYY/article/details/119908348

版权

css常见问题同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

css

2 篇文章 0 订阅

订阅专栏

文章目录

认识margin
- - 1. margin纵向重叠
  - 2. margin负值
圣杯布局和双飞翼布局
- - 圣杯布局
  - 双飞翼布局
flex实现三栏布局

认识margin

1. margin纵向重叠

相邻元素的margin-top、margin-bottom会重叠
空白的<p><p/>也会重叠

2. margin负值

margin-top踹自己，margin-bottom踹别的盒子
margin-left踹自己，margin-right踹别的盒子

上下关系的盒子，当上盒子设置margin-top:负值，自身会上移；设置margin-bottom:负值，下盒子会上移，且上盒子的高度会减少。
左右关系的盒子，当左盒子设置margin-left:负值，自身会左移；设置margin-right:负值，右盒子会左移，且左盒子的宽度会减少。

圣杯布局和双飞翼布局

使用float布局
两侧使用margin负值，以便和中间内容横向重叠
防止中间内容被两侧覆盖，一个用padding，一个用margin

圣杯布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.container{
				padding-left:200px;
				padding-right: 150px;
			}
			#center{
				background-color: yellow;
				width: 100%;
				
			}
			#left{
				position:relative;
				right: 200px;
				background-color: #008000;
				width: 200px;
				/* height: 100px; */
				margin-left: -100%;
				/* 当有浮动时，left应该是紧靠着center的右边的，
				就是因为center的宽度100%，才会挤下去，所以margin-left:100%;
				就可以将left元素移到center那行的开头*/
			}
			#right{
				background-color: skyblue;
				width: 150px;
				margin-right: -150px;
				/* 当设置margin-right为负值时，会减少自身的宽度，所以此时right盒子是没有宽度的 */		
						/* 如果设置margin-left为负值，会占据center的宽度 */
			}

		
			.float-left{
				float: left;
			}
		</style>
	</head>
	<body>
		
	
			<div class="container">
		<div id="center" class="float-left">
			center
		</div>
			<div id="left" class="float-left">
				left
			</div>
			
			<div id="right" class="float-left">
				right
			</div>
				</div>
		
	
	</body>
</html>

请添加图片描述

核心知识点：
1.先将每个盒子设置左浮动
2.再将父盒子设置内边距padding（为左右盒子留空；实实在在的留空）
3.将中间盒子设置宽度100%
4.处理左盒子；
4-1.设置相对定位，right:200px(左盒子的宽度)；
4-2.margin-left:-100%;负值，左盒子往左边移100%（也就数中间盒子的宽度）
5.处理右盒子；
5-1.margin-right:-150px(右盒子的宽度);负值，盒子设置margin-right为负值会减少自己的宽度，所以此时右盒子是没有宽度的，就会往上移。

双飞翼布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#center{
				background-color: yellow;
				width: 100%;
				height: 100px;
			}
			#center #center-wrap{
				margin: 0 150px 0 200px;
			}
			#left{

				background-color: #008000;
				width: 200px;
				height: 100px;
				margin-left: -100%;
				
			}
			#right{
				background-color: skyblue;
				width: 150px;
				height: 100px;
				margin-left: -150px;
				
			}
	
			.float-left{
				float: left;
			}
		</style>
	</head>
	<body>
		
		
		<div id="center" class="float-left">
			<div id="center-wrap">
				center
			</div>
		</div>
			<div id="left" class="float-left">
				left
			</div>
			
			<div id="right" class="float-left">
				right
			</div>
	
	
	</body>
</html>

请添加图片描述

核心知识点：
1.将所有盒子设置左浮动
2.中间盒子的子盒子设置外边距（同样为左右盒子留空;但中间盒子占据的宽度为整个屏幕；就是左右盒子只是覆盖在中间盒子上面；但是显示内容部分为中间盒子的子盒子）
3.处理左盒子
3-1.margin-left:-100%;左移到中间盒子预留的左边
4.处理右盒子
4-1.margin-left:-150px;左移到中间盒子预留的右边

flex实现三栏布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{
				display: flex;
				width: 100%;
				height: 200px;
			}
			.main,.left,.right{
				border: 1px solid #FF0000;
				height: 100%;
			}
			.left,.right{
				width: 100px;
			}
			.main{
				flex:1;
			}
		</style>
	</head>
	
	<body>
		<div class="box">
			<div class="left">
				left
			</div>
			<div class="main">
				main
			</div>
			
			<div class="right">
				right
			</div>
		</div>
	</body>
</html>

flex:1;-->flex-grow:1;当有剩余空间时，放大自身大小

自豪听我的

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS实现左中右三栏布局，中间自适应的三种方法

文章目录认识margin1. margin纵向重叠2. margin负值圣杯布局和双飞翼布局圣杯布局双飞翼布局flex实现三栏布局认识margin1. margin纵向重叠相邻元素的margin-top、margin-bottom会重叠空白的<p><p/>也会重叠2. margin负值margin-top踹自己，margin-bottom踹别的盒子margin-left踹自己，margin-right踹别的盒子上下关系的盒子，当上盒子设置margin-to
复制链接

扫一扫

专栏目录