如何用CSS结合calc()修复固定间距两列布局超宽问题？-css教程-PHP中文网

两列加margin后总宽超100%是因为margin不参与width计算，实际占用空间为50%+50%+20px；正确做法是用calc((100% - 20px) / 2)提前扣除间距。

如何用css结合calc()修复固定间距两列布局超宽问题？

为什么两列加 margin 后总宽超 100%

不是浏览器算错，而是 margin 本身不参与 width 计算。当你写 .col-1 { width: 50%; margin-right: 20px; } 和 .col-2 { width: 50%; }，两列内容区加起来是 100%，但右侧多出的 20px 是额外叠加在外部的——实际占用空间 = 50% + 50% + 20px，必然溢出父容器。

常见现象包括：第二列被挤到下一行、水平滚动条意外出现、右侧按钮被截断。

父容器没设 box-sizing: border-box，子元素又带 padding 或 border，误差进一步放大
用了 float 却没清浮动，渲染顺序错乱导致宽度计算失准
在 Flex 容器中仍用 margin 隔开列，而没启用原生 gap

calc() 两列均分（含固定间距）的正确写法

核心逻辑：把“间距”从总宽里提前扣掉，再平分剩余空间。假设两列间需 20px 水平间距，那每列宽度应为 (100% - 20px) / 2。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

必须写成：width: calc((100% - 20px) / 2);

括号不能省：100% - 20px / 2 会被解析为 100% - 10px，不是你想要的
运算符前后必须有空格：calc((100% - 20px) / 2) ✅，calc((100%-20px)/2) ❌（IE9+ 会失效）
若列自身有 padding: 12px 或 border: 1px solid，且希望视觉宽度严格对齐，需额外加 box-sizing: border-box

兼容旧版浏览器时的 fallback 策略

IE9–11 不支持 / 和 * 运算，calc((100% - 20px) / 2) 在这些环境里直接退化为无效声明，回退到 width: auto，布局完全崩坏。

最简 fallback：改用整数百分比 + max-width 限制，例如 width: 48%; max-width: 480px;
更稳方案：用 display: flex 替代 float 或 inline-block，并设 gap: 20px —— Flex gap 在 IE11 不支持，但现代浏览器已全覆盖；如真需兼容 IE11，可用 margin + :last-child { margin-right: 0; } 手动控制
避免嵌套 calc：calc(calc(100% / 2) - 10px) 多数浏览器不认，纯属浪费调试时间

和 Flex/Grid 比，calc() 在两列间距场景下的真实代价

calc() 能“算出一个数”，但它不会响应文字换行、图片加载失败、字体加载延迟等运行时变化。一旦某列内容撑开（比如长单词无断行、图片未设 max-width: 100%），整行就可能溢出，而 flex-wrap: wrap 或 grid-template-columns: repeat(auto-fit, minmax(...))) 会自动折行。