高度已知，左右300px，中间自适应

最新推荐文章于 2022-08-07 21:12:25 发布

weixin_34401479

最新推荐文章于 2022-08-07 21:12:25 发布

阅读量91

点赞数

原文链接：https://juejin.im/post/5b8fe420e51d450e4967a45a

版权

gird实现方法

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
	*{
		padding: 0;
		margin: 0;
	}
		.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: blue;
		}
	</style>
</head>
<body>
	<div class="left-center-right">
		<div class="left"></div>
		<div class="center">
			<h1>这是一个grid布局</h1>
			<p>这是一个grid布局这是一个grid布局这是一个grid布局这是一个grid布局这是一个grid布局这是一个grid布局这是一个grid布局</p>
		</div>
		<div class="right"></div>
	</div>
</body>
</html>
复制代码

table-cell实现方法

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
	*{
		padding: 0;
		margin: 0;
	}
		.left-center-right{
			display: table;
		}
		.left-center-right>div{
			display: table-cell;
		}
		.left{
			width: 300px;
			background: red;
		}
		.center{
			background: yellow;
		}
		.right {
			width: 300px;
			background: blue;
		}
	</style>
</head>
<body>
	<div class="left-center-right">
		<div class="left"></div>
		<div class="center">
			<h1>这是一个grid布局</h1>
			<p>这是一个grid布局这是一个grid布局这是一个grid布局这是一个grid布局这是一个grid布局这是一个grid布局这是一个grid布局</p>
		</div>
		<div class="right"></div>
	</div>
</body>
</html>
复制代码

转载于:https://juejin.im/post/5b8fe420e51d450e4967a45a