相信大家在浏览网页的时候都有过被广告支配的时候，而为了不影响用户的体验，且随着网站内容的丰富和复杂度提升，设计师们开始寻求能够在一个页面上同时展示更多信息的方法，这就催生了三栏布局的需求。本文将介绍五种不同的三栏布局实现方法，每种方法都有其独特之处，适用于不同的情境和兼容性需求。
前言
当面试官问你三栏布局如何实现时，相信大家第一时间都是会想到直接用定位来解决，但是当面试官问你会几种方法时，这时就要考验大家的知识储备了。html结构如下：
<div class="page"> <div class="left">广告位</div> <div class="content">主要内容</div> <div class="right">广告位</div> </div>但是这样还不够完美。这时候就有一个小细节了，我们都知道，浏览器在拿到代码时是从上到下来编译的。而中间部分是主要内容，肯定是需要优先加载的。所以我们应该要改成如下形式：
<div class="page"> <div class="content">主要内容</div> <div class="left">广告位</div> <div class="right">广告位</div> </div>css基础代码如下
<style> * { padding: 0; margin: 0; } .page { height: 200px; } .left, .right { height: 200px; width: 200px; background: #0ed898; } .content { height: 200px; background: pink; } </style>下面的布局都是以前言中的代码进行修改来完成布局的
五种布局方式
1. 圣杯布局（Float + Relative Positioning）
圣杯布局是一种经典的CSS布局技巧，通过浮动和相对定位实现三栏布局，其中主要内容区域优先加载，左右两栏固定宽度。
给page下的div加上浮动。再给page左右两边加上内边距
<style>
<!-- 其余代码保持不变 -->
.page {
padding: 0 200px;
}
.content {
height: 200px;
width: 100%;
background: pink;
}
.page div {
float: left;
}
</style>
此时效果如下：
再给左右两边的盒子加上样式
.left {
position: relative;
margin-left: -200px;
left: -100%;
}
.right {
margin-right: -200px;
}
效果就完成了
此时请大家思考一下为什么left盒子往左移，而right盒子往右移却能够实现效果呢？
其实这就是浮动的特点了，这两个盒子本来是紧紧跟在主要内容后面的但是content上了100%的宽度，所以这两个盒子自然而然的就被挤到下面了，所以他们本应该是在主要内容右边的，所以left需要往左边移，right往右移。如果你把这个弄懂了 那么下面的代码你应该都可以弄懂了。
特点：
- 左右两栏通过负边距和相对定位移出文档流。
- 中间内容区域自然流动，无需特殊处理即可自适应宽度。
缺点：
- 需要对浮动元素进行清除，以避免影响后续元素布局。
- 相对复杂的计算和调整。
2. 双飞翼布局（改进的Float布局）
圣杯布局中，为了防止左右两侧的广告位遮挡中间内容，通常会对.content使用相对定位，并通过padding和左右侧广告位的position: relative及left/right属性来调整位置。而双飞翼布局则完全依赖于浮动和负外边距（margin）来实现，避免了相对定位的使用，使得布局更加纯粹和易于理解。
代码示例：
<style>
* {
margin: 0;
padding: 0;
}
.page {
height: 200px;
}
.left,
.right {
width: 200px;
height: 200px;
background: #06ec48;
}
.content {
height: 200px;
width: 100%;
background: pink;
}
.inner {
margin: 0 200px;
height: 100%;
}
.page>div {
float: left;
}
.left {
margin-left: -100%;
}
.right {
margin-left: -200px;
}
</style>
<div class="page">
<div class="content">
<div class="inner">主要内容</div>
</div>
<div class="left">广告位</div>
<div class="right">广告位</div>
</div>
特点：
- 内容区域增加一个包裹层，并设置左右外边距，使内容居中。
- 左右两栏分别通过负外边距调整位置。
优点：
- 更简洁的CSS代码。
- 内容优先于广告位加载。
3. 弹性布局（Flexbox）
随着Flexbox的普及，利用弹性盒子模型实现三栏布局变得非常简单直观，且兼容性良好。
代码示例：
<style>
* {
margin: 0;
padding: 0;
}
.page {
height: 200px;
}
.left,
.right {
width: 200px;
height: 200px;
background: #06ec48;
}
.content {
height: 200px;
width: 100%;
background: pink;
}
.page {
display: flex; /* 1. 使用flex布局 */
}
.content {
flex: 1; /* 2. 设置内容占满剩余空间 */
order: 1; /* 3. 设置内容在页面中的顺序 */
}
.right {
order: 2; /* 4. 设置广告在页面中的顺序 */
}
</style>
<div class="page">
<div class="content">主要内容</div>
<div class="left">广告位</div>
<div class="right">广告位</div>
</div>
特点：
display: flex;声明容器为弹性布局。flex: 1;使内容区域自适应填充剩余空间。order:属性调整元素显示顺序，确保主要内容优先渲染。
优点：
- 简洁高效，易于理解和维护。
- 自动处理元素对齐和空间分配。
4. 表格布局
虽然表格布局不是为通用布局设计的，但在特定情况下也能实现三栏布局。不过，这种方法会导致主要内容不能优先加载。
代码示例：
<style>
* {
margin: 0;
padding: 0;
}
.page {
width: 100vw;
height: 200px;
display: table;
table-layout: fixed;
}
.content {
height: 200px;
width: 100%;
background: pink;
}
.page>div {
display: table-cell;
}
.left,
.right {
width: 200px;
height: 200px;
background: #06ec48;
}
</style>
</head>
<body>
<div class="page">
<div class="content">主要内容</div>
<div class="left">广告位</div>
<div class="right">广告位</div>
</div>
</body>
特点：
- 使用
display: grid;定义网格布局。 - 简单明了地划分列宽。
缺点：
- 内容渲染顺序受限于HTML结构。
- 不利于SEO和可访问性。
5. 网格布局（Grid Layout）
CSS Grid是现代Web布局中非常强大的工具，特别适合处理复杂和灵活的布局。
代码示例：
<style>
* {
padding: 0;
margin: 0;
}
.page {
height: 200px;
display: grid;
grid-template-columns: 200px 1fr 200px;
}
.left,
.right {
height: 200px;
width: 200px;
background: #0ed898;
}
.content {
height: 200px;
background: pink;
}
</style>
</head>
<body>
<div class="page">
<div class="left">广告位</div>
<div class="content">主要内容</div>
<div class="right">广告位</div>
</div>
</body>
特点：
- 利用
grid-template-columns定义列宽。 - 直观的二维布局系统。
局限：
- 和表格布局类似，内容加载顺序受HTML结构限制。
总结：
选择哪种布局方法取决于项目需求、兼容性考虑以及个人偏好。对于现代Web开发，推荐使用Flexbox或Grid布局，它们提供了更强大、更灵活的布局解决方案，同时也保证了良好的语义性和可访问性。而圣杯布局和双飞翼布局作为经典方案，在需要支持较老浏览器的场景下仍然有其价值。理解这些布局原理和技巧，可以帮助开发者更好地应对各种页面布局挑战。
