博客正文布局对照：单栏 / 两栏 / 三栏

把正文从单栏改成多栏，是博客改版里最容易上头的一件事。三栏看起来最「完整」，也最容易做坏。这篇把三种布局的实测数据摆出来，供后来者抄作业——或者劝退。

一、三种布局的几何

设正文列宽为 W，左右侧栏分别为 L 和 R，栏间距统一为 G：

外壳宽度（也就是浏览器里真正占的位置）等于三者相加，再加两侧留白。代入具体数字：

布局	行宽	外壳（两侧各 24px）	断点下限
单栏	680	728	无
两栏	230 + 40 + 680 = 950	998	约 1100
三栏	230 + 40 + 680 + 40 + 350 = 1340	1388	约 1440

结论很直接：三栏的硬门槛是 1440px。在 1440 的屏幕上，左右只剩 26px 余量，一点都不能再挤。1366 和 1280 的笔记本直接放不下，只能回落到单栏。

如果你一定要在小屏上保留三栏，唯一的路是把正文列从 680 压到 620、评论列压到 300，行宽降到 1230，外壳 1278——这样 1366 能勉强塞进去，代价是正文列宽比你现在习惯的窄了 60px。

断点不是「感觉差不多了就写一个数」。它由最宽的那个布局在最小可用屏幕上的实测占位反推出来，是一个算出来的数，不是试出来的数。

单栏布局里，宽图、大表格、代码块可以向外溢出一点，形成「破格」。现在常见的做法是让外壳比正文列左右各宽 60px，于是正文 680、破格带 800。

三栏布局里，正文列的左右紧挨着侧栏。如果破格量还是 ±60，宽表格的右缘会直接压到评论栏上。

方案	破格量	宽元素实际宽度	与侧栏关系
保持 ±60	60	800	压住侧栏，不可接受
收窄到 ±40	40	760	左缘贴左栏、右缘贴右栏，恰好
完全取消	0	680	宽表格被迫换行，排版变差

±40 是唯一可行的取值，因为它刚好等于栏间距。也就是说破格带吃掉的是「本来就要留白」的那部分空间，而不是别人的地盘。

代价是宽元素比单栏下窄了 40px。视觉上几乎无感，但如果你原来就靠这 60px 让表格挤进更多列，改成三栏之后可能需要重新调表格的列宽。

任何「加一栏」的方案，成本都不是新栏本身，而是它从现有布局里抢走的东西。抢间距，无感；抢正文，有感；抢破格带，看情况。

这是三栏方案里最需要想清楚的一件事。把评论区从文末搬到右栏，它面临三种命运：

处理方式	读完一半想评论时	右栏内容密度	实现复杂度
右栏吸顶 + 独立滚动	随时可评论	高	中
右栏随页面滚动	滚下去就找不到了	高	低
评论区留在文末	需要滚到底	—	最低

第二种看着最像「参考网站」，但实用性最差：读者读到第三屏想说话，得先把页面滚回去。把评论搬出文末却不解决「读到一半想说话」这个问题，等于白搬。

第一种在实现上有一个必须处理的细节：右栏独立滚动之后，它的滚动条会和页面滚动条打架。用户滚轮悬停在右栏上时，滚的是右栏还是页面，取决于当时的焦点位置——这是最容易让读者感到困惑的地方。要么给右栏加明确的高度上限和渐隐边界，要么在滚到尽头时把滚动权交还给页面。

界面上每一个「独立滚动区」都是一个小型的认知税。加之前先问：这里的内容，读者是不是真的会想在同一次停留里看两遍？

评论列宽度的选择比想象中敏感。

如果正文列宽 680 是硬约束，那 350 是能接受的底线。再往下压，省出来的 30px 对正文的帮助有限，对评论可读性的伤害却是实打实的。

我最后停在了单栏。不是因为多栏不好，而是因为这门技术的收益高度依赖一个我控制不了的变量：读者的屏幕有多宽。在保证不了 1440 的前提下，把最完整的形态做成默认值，只会让一部分人看到坏掉的页面。

做布局和做别的功能一样——优先保证最差情况下的下限，其次才是最好情况下的上限。