前端面试题之CSS实现一个三栏布局，左右两列列固定宽度，中间内容自适应

最新推荐文章于 2023-06-27 10:45:57 发布

狂暴草鱼卷

最新推荐文章于 2023-06-27 10:45:57 发布

阅读量173

点赞数 1

分类专栏： # css

本文链接：https://blog.csdn.net/weixin_47353884/article/details/118158945

版权

css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

圣杯布局

1. 浮动float
2. 绝对定位
3. 弹性盒
4. 表格布局
5. 网格布局

实现一个三栏布局，左右两列列固定宽度，中间内容自适应

1. 浮动float

让左盒子左浮动右盒子右浮动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动float</title>
	</head>
	<style>
		*{
		    margin: 0;
		    padding:0;
		}
		 .left{
		    float: left;
		    width: 100px;
		    background: red;
		}
		 .right{
		    float: right;
		    width: 100px;
		    background: red;
		}
		 .center{
		    background: yellow;
		}
	</style>
	<body>
		<div class="left">左</div>
		<div class="right">右</div>
		<div class="center">中</div>
	</body>
</html>

2. 绝对定位

左中右三个盒子都绝对定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>绝对定位</title>
	</head>
	<style>
		*{
		    margin: 0;
		    padding:0;
		}
		
		  .left,.center,.right{
		    position: absolute;
			text-align: center;
		}
		 .left{
		    left: 0rem;
		    width: 200px;
		    background: red;
		}
		 .right{
		    right: 0rem;
		    width: 200px;
		    background: red;
		}
		 .center{
		    left: 200px;
		    right: 200px;
		    background: yellow;
		}
	</style>
	<body>
		<div class="left">左</div>
		<div class="center">中</div>
		<div class="right">右</div>
	</body>
</html>

3. 弹性盒

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>弹性盒</title>
	</head>
	<style>
		*{
		    margin: 0;
		    padding:0;
		}
		
		 body{
			 display: flex;
			 text-align: center;
		 }
		 .left{
		    width: 100px;
		    background: red;
		}
		 .center{
		    flex: 1;
		    /* 让中间部分适配整个宽度 */
		    background: yellow;
		}
		 .right{
		    width: 100px;
		    background: red;
		}
	</style>
	<body>
		<div class="left">左</div>
		<div class="center">中</div>
		<div class="right">右</div>
	</body>
</html>

4. 表格布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>display: table</title>
	</head>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		.left-center-right {
			display: table;
			width: 100%;
			height: 100px;
		}
		.left-center-right>div {
			display: table-cell;
		}
		.left {
			width: 200px;
			background-color: red;

		}
		.center {
			background-color: yellow;
		}
		.right {
			width: 200px;
			background-color: red;
		}
	</style>
	<body>
		<div class="left-center-right">
			<div class="left">左</div>
			<div class="center">中</div>
			<div class="right">右</div>
		</div>
	</body>
</html>

5. 网格布局

  <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>display: grid</title>
	</head>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
	</style>
	<body>
		<section class="layout grid">
			<style>
				 .left-center-right {
					display: grid;
					width: 100%;
					grid-template-rows: 100px;
					grid-template-columns: 300px auto 300px;
				}
				 .left {
					background: red;
				}
				 .center {
					background: yellow;
				}
				 .right {
					background: red;
				}
			</style>
			<div class="left-center-right">
				<div class="left">左</div>
				<div class="center">中</div>
				<div class="right">右</div>
			</div>
		</section>
	</body>
</html>

狂暴草鱼卷

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端面试题之CSS实现一个三栏布局，左右两列列固定宽度，中间内容自适应

圣杯布局1. 浮动float2. 绝对定位3. 弹性盒4. 表格布局5. 网格布局实现一个三栏布局，左右两列列固定宽度，中间内容自适应1. 浮动float让左盒子左浮动右盒子右浮动<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>浮动float</title> </head> <style> *{ m
复制链接

扫一扫

专栏目录