纯HTML/CSS全屏4列齐边布局的padding适配问题

嘿，这个问题我太熟了！本质上是CSS盒模型在搞鬼——默认情况下，元素的padding会被算在宽度之外，导致你的4列加上padding后总宽度直接超出容器，要么被迫换行，要么右侧缩回去留空。咱们一步步来彻底解决：

第一步：先搞定盒模型的基础问题 #

先全局重置盒模型，让所有元素的padding和border都包含在自身宽高内，不会额外撑大元素。这是解决这类布局问题的核心前提：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

加了这段代码后，你给列加的任何padding都会被计入列的宽度里，不会打破布局的总宽度计算。

第二步：实现响应式4列齐边布局 #

下面给你两种纯CSS的实现方案，都是无需Bootstrap的原生方案：

方案1：Flexbox布局（兼容性好，适合全场景） #

HTML结构：

<div class="full-width-container">
  <div class="col">内容1</div>
  <div class="col">内容2</div>
  <div class="col">内容3</div>
  <div class="col">内容4</div>
</div>

CSS样式：

.full-width-container {
  display: flex;
  width: 100vw; /* 占满屏幕宽度 */
  /* 如果需要列之间留间距，用gap而不是padding，避免宽度计算混乱 */
  /* gap: 1rem; */
}

.col {
  flex: 1; /* 让4列自动平分容器宽度 */
  padding: 1.5rem; /* 左右上下随便加padding，不会撑破布局 */
  background-color: #f5f5f5;
  border-right: 1px solid #eee; /* 可选：加列分隔线 */
}

/* 响应式适配：小屏幕自动变2列/1列 */
@media (max-width: 768px) {
  .full-width-container {
    flex-wrap: wrap;
  }
  .col {
    flex: 0 0 50%; /* 平板端2列 */
  }
}

@media (max-width: 480px) {
  .col {
    flex: 0 0 100%; /* 手机端1列 */
  }
}

方案2：Grid布局（更简洁，适合现代浏览器） #

如果你的目标浏览器是较新版本的，用Grid会更省心：

.full-width-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 直接定义4个等宽列 */
  width: 100vw;
  /* 列间距同样用gap */
  /* gap: 1rem; */
}

.col {
  padding: 1.5rem;
  background-color: #f5f5f5;
  border-right: 1px solid #eee;
}

/* 响应式适配 */
@media (max-width: 768px) {
  .full-width-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .full-width-container {
    grid-template-columns: 1fr;
  }
}

额外提醒 #

如果想让整个布局左右留边距，不要给.full-width-container加width:100vw，改成width:auto，然后加padding: 0 1rem，这样列会自动在容器内平分剩余宽度，既保留内边距又不会超出屏幕。

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