百分比布局在移动端为啥宽度算不准？

迷人的爱军提问于 2026-03-01 06:24:20 阅读 22

移动

我做移动端页面时用百分比布局，父容器是100%，子元素设了50%，但实际显示宽度明显不对，有时候还超出屏幕。是不是 viewport 没设好？还是盒模型的问题？

我试过加 box-sizing: border-box，也确认了 meta viewport 是标准的，但还是不行。下面是我写的 CSS：

.container {
  width: 100%;
}
.item {
  width: 50%;
  padding: 10px;
  border: 1px solid #ccc;
}

布局方案移动端开发

我来解答赞 11 收藏

反馈

1 条解答

令狐鑫玉 Lv1

看了你的代码，问题其实挺典型的。虽然你说加了 box-sizing: border-box，但你贴出来的代码里并没有，我猜要么是没加上，要么是加的位置不对。

具体来说，默认的盒模型是 content-box，这种情况下 width: 50% 只是指内容区域的宽度，padding 和 border 是往外叠加的。算一笔账就清楚了：50% 的内容宽度 + 左右各 10px 的 padding + 左右各 1px 的 border，实际渲染宽度是 50% + 22px。两个元素并排就是 100% + 44px，必然撑破容器。

解决方案很简单，强制覆盖盒模型：

/* 关键点：用通配符或者明确指定子元素 */

* {

  box-sizing: border-box;

}



/* 或者只针对容器内的元素 */

.container,

.container * {

  box-sizing: border-box;

}



.container {

  width: 100%;

  /* 父容器最好也把 padding 考虑进去，避免内部计算出问题 */

  padding: 0;

}



.item {

  width: 50%;

  padding: 10px;

  border: 1px solid #ccc;

  /* 如果两个 item 要并排，记得处理 inline-block 的空隙问题 */

  display: inline-block;

  /* 或者用 float */

  float: left;

}

还有个容易被忽略的坑，如果你的 .item 是 display: inline-block，HTML 里两个元素之间的换行符会被渲染成一个空白字符，大概 4px 左右，这也会导致宽度溢出。处理方式要么把 HTML 写成一行，要么给父容器加 font-size: 0，要么干脆用 flex 布局：

.container {

  width: 100%;

  display: flex;

  flex-wrap: wrap; /* 防止超出 */

}



.item {

  /* flex 布局下不用显式写 50%，用 flex-basis 更稳 */

  flex: 0 0 50%;

  padding: 10px;

  border: 1px solid #ccc;

  box-sizing: border-box;

}

另外排查一下父容器本身是不是也有 padding，如果 .container 有内边距，那 .item 的 50% 是基于父容器的内容宽度计算的，视觉上就会显得窄。

调试的时候建议打开开发者工具，点中元素看 Computed 面板里的实际数值，比猜靠谱多了。

2026-03-01 09:41