实现高度，左右宽度已知，中间自适应的三栏布局的5种方法

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

Elvira_D

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

阅读量450

点赞数

分类专栏： HTML CSS 文章标签：三栏布局

本文链接：https://blog.csdn.net/u011435776/article/details/82014345

版权

CSS 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

HTML

8 篇文章 0 订阅

订阅专栏

实现方式：

float
绝对定位
flexbox布局
table
grid网格布局

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>三栏自适应布局</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.layout .left-center-right>div {
			height: 100px;
		}
		.layout {
			margin-top: 20px;
		}
	</style>
</head>
<body>
	<!-- 浮动布局 -->
	<section class="layout float">
		<style type="text/css">
			.float .left {
				float: left;
				width: 300px;
				background: red;
			}
			.float .right {
				float: right;
				width: 300px;
				background: blue;
			}
			.float .center {
				background: yellow;
			}
		</style>
		<article class="left-center-right">
			<div class="left">left</div>
			<div class="right">right</div>
			<div class="center">
				<h3>浮动布局</h3>
				center
			</div>
		</article>
	</section>

	<!-- 绝对定位布局 -->
	<section class="layout absolute">
		<style type="text/css">
			.absolute .left-center-right>div {
				position: absolute;
			}
			.absolute .left {
				left: 0;
				width: 300px;
				background: red;
			}
			.absolute .center {
				left: 300px;
				right: 300px;
				background: yellow;
			}
			.absolute .right {
				right: 0;
				width: 300px;
				background: blue;
			}
		</style>
		<arcticle class="left-center-right">
			<div class="left">left</div>
			<div class="center">
				<h3>绝对定位布局</h3>
				center
			</div>
			<div class="right">right</div>
		</arcticle>
	</section>

	<!-- flexbox布局 -->
	<section class="layout flexbox">
		<style type="text/css">
			.flexbox {
				margin-top: 140px;
			}
			.flexbox .left-center-right {
				display: flex;
			}
			.flexbox .left {
				width: 300px;
				background: red;
			}
			.flexbox .center {
				flex: 1;
				background: yellow;
			}
			.flexbox .right {
				width: 300px;
				background: blue;
			}
		</style>
		<arcticle class="left-center-right">
			<div class="left">left</div>
			<div class="center">
				<h3>flexbox布局</h3>
				center
			</div>
			<div class="right">right</div>
		</arcticle>
	</section>

	<!-- table布局 -->
	<section class="layout table">
		<style type="text/css">
			.table .left-center-right {
				display: table;
				width: 100%;
			}
			.table .left-center-right>div {
				display: table-cell;
			}
			.table .left {
				width: 300px;
				background: red;
			}
			.table .center {
				background: yellow;
			}
			.table .right {
				width: 300px;
				background: blue;
			}
		</style>
		<article class="left-center-right">
			<div class="left">left</div>
			<div class="center">
				<h3>表格布局</h3>
				center
			</div>
			<div class="right">right</div>
		</article>
	</section>

	<!-- grid布局 -->
	<section class="layout grid">
		<style type="text/css">
			.grid .left-center-right {
				display: grid;
				grid-template-rows: 100px;
				grid-template-columns: 300px auto 300px;
			}
			.grid .left {
				background: red;
			}
			.grid .center {
				background: yellow;
			}
			.grid .right {
				background: blue;
			}
		</style>
		<article class="left-center-right">
			<div class="left">left</div>
			<div class="center">
				<h3>grid布局</h3>
				center
			</div>
			<div class="right">right</div>
		</article>
	</section>
</body>
</html>

Elvira_D

关注

0
点赞
踩
0

收藏

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

实现方式：float 绝对定位 flexbox布局 table grid网格布局&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;三栏自适应布局&lt;/title&gt; &lt;style t
复制链接

扫一扫

专栏目录