三栏布局的“7宗罪”

最新推荐文章于 2025-08-07 11:47:41 发布

weixin_34232617

最新推荐文章于 2025-08-07 11:47:41 发布

阅读量92

点赞数

CC 4.0 BY-SA版权

文章标签：面试

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

本文总结了七种实现三栏布局的方法，包括flex布局、float方式、BFC、圣杯模式、双飞翼布局、grid布局及display:table。每种方法详细介绍了HTML结构与CSS样式，适用于不同场景下的网页设计需求。

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

不要被题目吓到，其实就是为了准备面试。抽空总结了实现三栏布局的7种方式，两边定宽，中间自适应。

三栏布局有以下几种方式，作为总结方便记忆：

1.flex 布局

html：
<div class="warp">
    <div class="left">我是左</div>
    <div class="main">我是主</div>
    <div class="right">我是右</div>
</div>

css:
.warp{
   display: flex;
   height: 100%; 
}
.left {
  width: 100px;
  background-color: #ccc;
}
.main {
  flex: 1;
  background-color: #cdf;
}
.right {
  width: 100px;
  background-color: yellow;
}


效果：
复制代码

2.float 方式

html:
<div class="warp">
    <div class="left">我是左</div>
    <div class="right">我是右</div>
    <!-- 必须将主要内容放到最后，不然的话右侧浮动后会被挤下来 -->
    <div class="main">我是主</div>
</div>

css:
.warp{
   width: 100%;
   height: 100%; 
}
.left,.right,.main {
   height: 100%;
}
.left {
  float: left;
  width: 100px;
  background-color: #ccc;
}
.right {
  width: 100px;
  float: right;
  background-color: yellow;
}
.main {
  margin: 0 100px;
  background-color: #cdf;
}

效果：
复制代码

如果改成下面的结构，会导致右侧的错位

html:
 <div class="warp">
    <div class="left">我是左</div>
    <!-- 必须将主要内容放到最后，不然的话右侧会被挤下来 -->
    <div class="main">我是主</div>
    <div class="right">我是右</div>
    
</div>
css:
同上
效果：
复制代码

上面这种方式的缺点：将主要内容放在结构的最后进行渲染，不符合用户体验

3.左右浮动，中间添加overflow:hidden 形成BFC

html:
<div class="warp">
    <div class="left">我是左</div>
    <div class="right">我是右</div>
    <div class="main">我是主</div>
</div>
css:
.warp{
  width: 100%;
  height: 100%; 
}
.left,.right,.main {
  height: 100%;
}
.left {
  float: left;
  width: 100px;
  background-color: #ccc;
}
.right {
  width: 100px;
  float: right;
  background-color: yellow;
}
.main {
  overflow: hidden;
  background-color: #cdf;
}
效果:
复制代码

上面这种方式的缺点：将主要内容放在结构的最后进行渲染，不符合用户体验

4.圣杯模式

原理说明：

1.主面板设置宽度为100%，主面板和两个侧栏都设置浮动，常见为左浮动，这个两个侧栏会被主面板挤下去，通过设置负边距将浮动的侧栏拉上来，左侧栏的负边距为100%，刚好是窗口的宽度，因此会从主面板下面的左边跑到与主面板对齐的左边，右侧栏此时浮动在主面板下面的左边，设置负边距为负的自身宽度刚好浮动到主面板对齐的右边。

2.为了避免侧栏遮挡主面板内容，在外层设置左右padding值为左右侧栏的宽度，给侧栏腾出空间，此时主面板的宽度减小。由于侧栏的负边距是相对主面板的，所以两个侧栏并不会像我们理想中的停靠在左右两边，而是跟着缩小的主面板一起向中间靠拢，此时使用相对布局，调整两个侧栏到相应的位置。

参考链接：www.jianshu.com/p/41a6d027b…

html：
<div class="warp">
    <div class="main">我是主</div>
    <div class="left">我是左</div>
    <div class="right">我是右</div>
    
</div>
css:
.warp{
   margin: 0 120px;
}
.warp:after {
    content:'';
    display: block;
    overflow: hidden;
    clear: both;
}
.left,.right,.main {
    height: 200px;
}
.main {
  float: left;
  width: 100%;
  background-color: #cdf;
}
.left {
  float: left;
  width: 120px;
  background-color: #ccc;
  margin-left: -100%;
  position: relative;
  left: -120px;
}
.right {
  width: 120px;
  float: left;
  background-color: yellow;
  margin-left: -120px;
  position: relative;
  right: -120px;
}
效果：
复制代码

圣杯模式布局步骤：

1:html结构，主要内容所在的<div>在最前；
2.父元素的div设置margin／padding； 为左右div的宽度，为了后面留出放置左右侧边栏；
3.中左右三块都设置左浮动；
4.设置div.main宽为100%，设置两侧栏的宽度；
5.left设置margin-left为-100%；相对定位，left：为自身宽的的负值；
6.right设置margin-left为-自身宽度；相对定位，right:自身宽的的负值；
复制代码

5.双飞翼布局

双飞翼布局出自淘宝UED团队，它将内容比作鸟的身体，左右比作双翼，所以叫作双飞翼，其实就是为了解决三栏布局。我们来看一下它的实现方法。它与圣杯布局很像，也是全部往左浮动，但是在内容div里再嵌套一个div，设置子div的margin为左右div预留位置，左右div只设置margin负值即可实现。与圣杯布局相比，少了position:relative，多了一个div。

html:
<div class="wrap">
    <div class="main-content">
        <div class="main"></div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
</div>
css:
.wrap {
  width: 100%;
}
.wrap::after {
  display: block;
  content: '';
  font-size: 0;
  height: 0;
  clear: both;
  zoom: 1;
}
.main-content {
  float: left;
  width: 100%;
}
.main {
  height: 100px;
  background-color: green;
  margin-left: 110px;
  margin-right: 110px;
}
.left {
  float: left;
  width: 100px;
  height: 100px;
  background-color: orange;
  margin-left: -100%;
}
.right {
  float: left;
  width: 100px;
  height: 100px;
  background-color: orange;
  margin-left: -100px;
}
效果：
复制代码

6.使用grid进行布局

html:
<div class="container">
    <div class="left">left</div>
    <div class="main">main</div>
    <div class="right">right</div>
</div>
css:
.container {
  display: grid;
  height: 100px;
  grid-template-rows: 100px;
  grid-template-columns: 100px auto 100px;
}
.left {
  height: 100px;
  background: #ccc;
}
.main {
  height: 100px;
  background-color: #c60;
}
.right {
  height: 100px;
  background: yellow;
}
效果：
复制代码

7.display:table

html:
<div class="container">
    <div class="left">left</div>
    <div class="main">main</div>
    <div class="right">right</div>
</div>
css:
.container {
  display: table;
  height: 100px;
  width: 100%;
}
.left,.main,.right {
    display:table-cell;
    height: 100px;
}
.left {
  width: 100px;
  background: #ccc;
}
.main {
  background-color: #c60;
}
.right {
  width: 100px;
  background: yellow;
}
效果：
复制代码