三栏布局（草稿）

最新推荐文章于 2025-07-12 11:42:46 发布

from_shanghai

最新推荐文章于 2025-07-12 11:42:46 发布

阅读量179

点赞数

CC 4.0 BY-SA版权

分类专栏：写着玩没有多大价值

本文链接：https://blog.youkuaiyun.com/from_shanghai/article/details/97784321

写着玩没有多大价值专栏收录该内容

18 篇文章

订阅专栏

本文深入解析了网页设计中常见的三栏布局实现方法，包括中间自适应两边定宽、圣杯布局及双飞翼布局，详细介绍了每种布局的DOM结构、CSS样式设置及关键步骤，适合前端开发者学习。

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

三栏布局分两种：

中间自适应，两边定宽

1.左边 float：left 右边float：right 中间 margin 上下0 左右分别是左边和右边的宽

中间 ： min-width: 100px;  /* 最小宽度，防止浏览器缩小后中间部分被隐藏 */

2.左边右边绝对定位 top：0 left，right：0 中间 margin 上下0 左右分别是左边和右边的宽

3.用容器包裹三栏，并将容器的display设置为flex，左右两部分宽度设置为固定，中间flex设置为1

以上三种方法中间部分都不设宽所以叫自适应

圣杯布局：

1.container padding-left padding-right 留出左、右部分宽度

2.dom结构时 center写在前面

3.center、left、right

三个都float:left

4.center 100% 左边，右边各自设置固定宽度

5.footer 清除浮动

6.左边：margin-left：-100% 相对定位 right：左部分宽度

这个效果我不懂就这么记吧

7.右边：margin-right：- 右部分宽度

8.body：min-width：左宽度x2 + 右宽度

dom:

<div id="header"></div>
<div id="container">
  <div id="center" class="column"></div>
  <div id="left" class="column"></div>
  <div id="right" class="column"></div>
</div>
<div id="footer"></div>


css:

body {
  min-width: 550px;
}

#container {
  padding-left: 200px; 
  padding-right: 150px;
}

#container .column {
  float: left;
}

#center {
  width: 100%;
}

#left {
  width: 200px; 
  margin-left: -100%;
  position: relative;
  right: 200px;
}

#right {
  width: 150px; 
  margin-right: -150px; 
}

#footer {
  clear: both;
}

双飞翼：

dom：

<body>
  <div id="header"></div>
  <div id="container" class="column">
    <div id="center"></div>
  </div>
  <div id="left" class="column"></div>
  <div id="right" class="column"></div>
  <div id="footer"></div>
<body>

css：

#container {
  width: 100%;
}

.column {
  float: left;
}

#center {
  margin-left: 200px;
  margin-right: 150px;
}

#left {
  width: 200px; 
}

#right {
  width: 150px; 
}

#footer {
  clear: both;
}

1.container 宽度 100%

2.container、left、right 都设置 float:left

3.center 设置 margin-left：左边宽度 margin-right：右边宽度

（圣杯：container： padding-left padding-right 留出左、右部分宽度然后 center：就100% float）

左边、右边各自设置自己的宽度

4.footer 清除浮动

（三部分都 flloat：left）

5.左边：margin-left：-100%

6.右边：margin-right：- 右部分宽度

7.body：min-width：左宽度 + 右宽度 + 留给中间宽度

参考：https://www.jianshu.com/p/81ef7e7094e8