我之前也碰到过类似的布局困扰，结合你的需求（25%/50%/25%比例、填满视口或居中、高可移植性），给你两个经过实践验证的方案，兼容几乎所有现代浏览器和设备：

方案一：精确比例填满视口的CSS Grid布局 #

CSS Grid是实现这种固定比例分栏最直接的方式，代码简洁且兼容性极佳（支持IE11及所有现代浏览器），能完美让三栏填满整个视口宽度：

/* 重置默认样式，避免浏览器默认margin/padding干扰 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 容器设置为Grid布局，定义列比例 */
.grid-container {
  display: grid;
  /* 直接定义三栏宽度比例：25%、50%、25% */
  grid-template-columns: 25% 50% 25%;
  /* 让容器高度至少占满视口，可选，根据你的内容调整 */
  min-height: 100vh;
}

/* 三栏样式示例，可根据需求自定义 */
.left-column {
  background-color: #f0f0f0;
  padding: 1rem;
}

.middle-column {
  background-color: #e0e0e0;
  padding: 1rem;
}

.right-column {
  background-color: #f0f0f0;
  padding: 1rem;
}

对应的HTML结构：

<div class="grid-container">
  <div class="left-column">左栏内容</div>
  <div class="middle-column">中栏内容</div>
  <div class="right-column">右栏内容</div>
</div>

关键说明： #

• box-sizing: border-box 确保栏的内边距和边框不会额外增加宽度，保证比例精确
• grid-template-columns 直接定义三栏的宽度比例，无需计算像素值，可移植性极强
• 容器默认会填满父元素宽度（这里父元素是body，默认占满视口），所以三栏自然填满视口

方案二：比例优先+居中降级的Flexbox方案 #

如果某些场景下（比如内容最小宽度限制导致比例无法实现），需要三栏整体居中，Flexbox可以很好地实现这个需求，同时保留比例优先级：

/* 同样先重置默认样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 容器设置为Flex布局，水平居中，允许换行（可选） */
.flex-container {
  display: flex;
  justify-content: center;
  /* 让容器宽度自适应内容，但最大占满视口 */
  width: 100%;
  min-height: 100vh;
}

/* 定义三栏的基础宽度比例 */
.left-column {
  flex: 1; /* 对应25%，因为总flex值是1+2+1=4，1/4=25% */
  max-width: 25vw;
  background-color: #f0f0f0;
  padding: 1rem;
}

.middle-column {
  flex: 2; /* 对应50%，2/4=50% */
  max-width: 50vw;
  background-color: #e0e0e0;
  padding: 1rem;
}

.right-column {
  flex: 1; /* 对应25% */
  max-width: 25vw;
  background-color: #f0f0f0;
  padding: 1rem;
}

/* 小屏幕下的响应式适配，可选，提升移动端体验 */
@media (max-width: 768px) {
  .flex-container {
    flex-direction: column;
  }
  .left-column, .middle-column, .right-column {
    max-width: 100%;
    flex: 1;
  }
}

对应的HTML结构和方案一一致，只需把容器类名改成flex-container即可。

关键说明： #

• flex: 1/2/1 定义了三栏的宽度比例，当容器足够宽时，会严格遵循25%/50%/25%
• max-width: XXvw 限制栏的最大宽度，避免内容过宽
• justify-content: center 当容器宽度大于三栏总宽度时，三栏会自动居中
• 额外添加的媒体查询让布局在小屏幕下自动转为垂直排列，提升移动端兼容性

兼容性与可移植性说明 #

这两个方案都不需要依赖任何框架或库，纯CSS实现：

• Grid方案支持IE11（需添加-ms前缀，比如-ms-grid-columns: 25% 50% 25%;），现代浏览器无需前缀
• Flexbox方案支持IE10及以上，所有现代浏览器完美兼容
• 代码可以直接复制到任何项目中，只需调整栏的背景色、内边距等样式即可

内容的提问来源于stack exchange，提问作者Kristopher Kerwin