简体中文
English什么是固定布局(fixed layout)?它与流式布局有什么区别,何时该用?
更新时间
固定布局（fixed layout）指页面整体宽度和各栏宽度用 px 这类固定单位写死，不随浏览器窗口缩放而伸缩。它适合需要精确还原视觉稿、版式对齐要求高的页面；如果页面主要面向多种屏幕尺寸阅读，通常更应优先考虑流式布局（liquid layout）。Pagecolumn 的布局生成器正是按栏数（1 至 5 栏）和宽度单位（%、px、em）来生成多栏 CSS 布局代码，固定布局与流式布局的差异就落在宽度单位的选择上。
固定布局与流式布局的核心差异
| 对比维度 | 固定布局（fixed layout） | 流式布局（liquid layout） |
|---|---|---|
| 宽度单位 | px 等固定单位 | %、em 等相对单位 |
| 窗口缩放时 | 版式不变，宽度不跟随 | 栏宽随容器或字号伸缩 |
| 版式控制 | 精确、易对齐 | 需要处理伸缩后的比例与间距 |
| 主要代价 | 窄屏可能横向滚动，宽屏可能留白 | 极端宽度下可能出现内容过挤或过空 |
Pagecolumn 的生成器列表里同时提供“2 column fixed liquid layout”“3 column fixed liquid fixed layout”这类组合模式，说明固定与流式可以在同一页面里混用：部分栏定宽、部分栏按比例伸缩。
固定布局的适用场景与代价
适合用固定布局的情况：
- 需要按设计稿逐像素还原版式，栏宽、间距、边距都要求稳定。
- 后台管理界面、工具型页面，用户通常在较宽的桌面屏幕上使用。
- 页面内嵌图表、表格等对宽度敏感的元素，不希望随窗口变化重排。
需要接受的代价：
- 浏览器窗口窄于页面总宽时，会出现横向滚动条。
- 窗口很宽时，页面两侧留下大片空白。
- 字号放大或内容变长时，定宽容器更容易发生内容溢出。
多栏固定布局的实现要点
用生成器产出代码后，检查以下几点即可判断固定布局是否可靠：
- 容器定宽：外层容器给出明确的 px 宽度，而不是依赖百分比。
- 栏宽与间距可加总：各栏宽度加上栏间距、内边距、边框后不超过容器总宽，否则会挤行或溢出。
- 避免内容撑破：图片、长单词、表格等设置最大宽度或溢出处理，防止撑开定宽栏。
- 验证方法：在浏览器中把窗口从很窄拖到很宽，观察是否出现横向滚动、栏位错位或空白异常；再放大字号，检查文字是否溢出容器。
例如需要做一个三栏后台页面，左栏放导航、右栏放辅助信息、中间放主内容，可以把左右两栏设为固定 px 宽，中间栏用流式宽度吸收剩余空间，这样既保留对齐感，又不至于在宽屏下浪费空间。
怎么选
内容型页面、需要适配多种设备的站点，优先选流式布局；视觉稿还原要求高、使用环境以桌面宽屏为主的页面，可以考虑固定布局，或采用固定与流式混用的组合模式。在 Pagecolumn 这类生成器里，先确定栏数，再按上述判断选择 px 或 %/em 单位生成代码，最后用窗口缩放和字号放大两种方式验证效果。