使用table-cell实现三栏布局

最新推荐文章于 2025-06-11 08:30:00 发布

原创最新推荐文章于 2025-06-11 08:30:00 发布 · 2.3k 阅读

0 ·

CC 4.0 BY-SA版权

html 同时被 2 个专栏收录

2 篇文章

订阅专栏

css

1 篇文章

订阅专栏

本文介绍了一种使用 CSS 的 table-cell 属性来实现一个典型的三栏布局的方法，其中左右两栏固定宽度，中间栏自适应填充。通过简单的 HTML 结构配合 CSS 样式，演示了如何创建这种常见且实用的网页布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

起因是看到了一篇掘金上的文章（点击打开链接），感觉还有别的实现方式，就动手写了一下。（ps：当然也可以使用flex）

代码如下：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>使用table-cell 实现三栏布局，左右定宽中间自适应</title>
		<style>
			.parent {
				display: table;
				width: 100%;
			}
			.parent> div {
				display: table-cell;
				height: 200px;
				border: 1px solid red;
				box-sizing: border-box;
			}
			.left {
				width: 100px;
			}
			.right {
				width: 200px;
			}
		</style>
	</head>
	<body>
		<div class="parent">

			<div class="left">Left</div>
			<div class="main">Main</div>
			<div class="right">Right</div>
		</div>
	</body>
</html>