css实现左右中布局的几种方式以及遇过的问题

最新推荐文章于 2024-04-11 16:30:18 发布

假装是个web狗

最新推荐文章于 2024-04-11 16:30:18 发布

阅读量640

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/weixin_44897255/article/details/106238886

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、display 弹性布局

flex布局父元素display:flex; 左右子元素设置宽度width: 10rem;
中间子元素设置 flex:1 或者 width: calc(100% - 20rem)

<style>
	*{
		margin: 0;
		padding: 0;
	}
	.content{
		display: flex;
	}
	.box1,.box2,.box3{
		height: 6.25rem;
		display: inline-block;
	}
	.box1{
		width: 10rem;
		background-color: #666666;
	}
	.box2{
		text-align: center;
		// 宽度平分也是可以的
		/* width: calc(100% - 20rem); */
		//2.flex:1
		flex:1
	}
	.box3{
		width: 10rem;
		background-color: #888;
	}
</style>	
<body>
	<div class="content">
		<div class="box1">
			box1
		</div>
		<div class="box2">
			box2
		</div>
		<div class="box3">
			box3
		</div>
	</div>
</body>

以上是我尝试过的方式，可以的；
有尝试过，遇到的问题：
原因：外层没有用div包裹起来，所以也没有用display：flex
即使.三个div 设置display: inline-block 和宽度平分 width: calc(100% - 20rem); 也会造成下图的原因
在这里插入图片描述

为什么会这样呢？
首先是我先把他们设置成了行内元素，然而空格和换行都会造成空白的间隙（来源于浏览器的font-size的大小），我写的三个div换行了，所以有问题，解决方式：1.去掉空格跟换行（不建议），2.外层再用div包裹，设置font-size：0（不建议）；3. 上面的写法（嘻嘻）

2、浮动布局 float

左浮动, 右浮动, 中间自动填充

.box1{
	width: 10rem;
	height: 6.25rem;
	background-color: #384;
	text-align: center;
	color: #fdf6e3;
	float: left;
}
.box2{
	height: 6.25rem;
	background-color: #922;
}
.box3{
	width: 10rem;
	height: 6.25rem;
	background-color: #555;
	text-align: center;
	color: #fdf6e3;
	float: right;
}

3、绝对定位

position :absolute

.content{
	position: relative;				
}	
.box1,.box2,.box3{
	height: 6.25rem;
	display: inline-block;
	position: absolute;
	text-align: center;
}
.box1{
	left: 0;
	width: 300px;
	background-color: #823384;
}
.box2{
	left: 300px;
	right: 300px;
	background-color: #d29922;
}
.box3{				
	right: 0;
	width: 300px;
	background-color: #0c8ac5;
}

4、表格布局

dispaly : table

.content{
	width: 100%;
	display: table;		
}	
.box1,.box2,.box3{
	display: table-cell;
	height: 6.25rem;
	text-align: center;
}
.box1{
	width: 300px;
	background-color: #823384;
}
.box2{
	background-color: #d29922;
}
.box3{			
	width: 300px;
	background-color: #0c8ac5;
}

5、网格布局

display: grid

.content{
	display: grid;
	width: 100%;
	grid-template-rows: 100px;   //行高
	grid-template-columns: 300px auto 300px;	 // 左边300px 中间自适应 右边300px
}	
.box1{
	background-color: #823384;
}
.box2{
	background-color: #d29922;
}
.box3{			
	background-color: #0c8ac5;
}

假装是个web狗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css实现左右中布局的几种方式以及遇过的问题

1、display 弹性布局flex布局父元素display:flex; 左右子元素设置宽度width: 10rem;中间子元素设置 flex:1 或者 width: calc(100% - 20rem)<style> *{ margin: 0; padding: 0; } .content{ display: flex; } .box1,.box2,.box3{ height: 6.25rem; display: inline-block; } .bo.
复制链接

扫一扫