如何用布局生成器生成多栏 CSS 布局代码

在 Pagecolumn 的 Layout Generators 页面选择栏数（1 至 5 栏）和结构类型（嵌套、并列、留白式），再按需选择固定或液体布局，即可得到对应的多栏 HTML/CSS 布局代码。它适合需要快速搭出多栏骨架、又不想从零手写 CSS 2.0 多栏结构的场景；如果页面需要复杂响应式断点或现代 Grid 特性，生成结果只能作为起点，仍需自行调整。

生成器覆盖哪些布局

Pagecolumn 的布局生成器按“栏数 + 结构”组织，页面列出的入口包括：

结构名称对应不同的栏位关系：嵌套是栏内再分栏，并列是同级并排，留白式则通过外边距留出侧栏空间。先确定页面是“主内容 + 侧栏”还是“多个等宽区块”，再选对应入口，能少走弯路。

选择单位与布局类型

生成器支持用 %、px 或 em 定义栏宽，这直接决定布局是液体还是固定：

• %（液体布局）：栏宽随浏览器窗口变化，适合内容区需要自适应、侧栏宽度可伸缩的页面。窗口变窄时各栏按比例收缩，但过窄时可能出现文字挤压或换行。
• px（固定布局）：栏宽锁定，版式稳定、便于对齐设计稿，适合内容宽度已知的页面；窗口小于总宽度时会出现横向滚动。
• em（相对固定）：宽度随字号缩放，适合希望整体随用户字体设置等比变化的场景。

2 栏和 3 栏还提供“固定 + 液体”混合入口，例如侧栏固定、主内容自适应，这是内容站常见的组合。选择时先问自己：窗口变化时，哪一栏应该保持宽度、哪一栏应该伸缩。

操作步骤与验证

1. 打开 Layout Generators 页面，按栏数和结构点进对应生成器。
2. 在生成器中设定栏宽数值和单位（%、px 或 em），确认是固定还是液体布局。
3. 生成后复制输出的 HTML 结构与 CSS 代码，放入自己的页面文件。
4. 把代码嵌入现有页面时，注意外层容器的宽度是否与生成代码假设的一致；若外层已有内边距，栏宽总和可能超出而换行。
5. 验证方法：拖动浏览器窗口从宽到窄，观察各栏是否按预期收缩或保持；检查是否出现横向滚动条、栏位错位或最后一栏掉到下一行。出现掉行通常是各栏宽度加间距之和超过 100%（液体）或超过容器宽度（固定）。

常见卡点

• 栏宽加间距溢出：液体布局中若给栏加了左右 margin 或 border，需要把这些宽度算进百分比，否则总宽超过 100% 导致换行。
• 嵌套结构的内层宽度：嵌套布局的内层百分比是相对外层栏宽计算，不是相对整页，调整时要按父栏宽度换算。
• 固定布局的窄屏表现：px 布局在窄窗口下不会收缩，需要确认目标用户的最小屏幕宽度，或另做一套窄屏样式。
• 生成代码只是骨架：页面还提供 CSS Compressor、圆角生成器、渐变生成器等辅助工具，但生成的多栏代码不含具体视觉样式，颜色、字体、间距仍需自行补齐。