右侧padding未填充空白致div布局错位，寻求技术解决方案

我明白你的困惑——本来以为padding会帮你占住右侧空间，结果下面的div直接挤上来了，这其实是CSS盒模型的默认规则在搞鬼！

问题出在哪？ #

默认情况下，CSS用的是content-box盒模型：元素设置的width只算内容区域的宽度，padding、border都是额外加到外面的。你给第二个div设了width:25% + padding-right:25%，它的实际总宽度就变成了50%，加上第一个div的25%，首行总共只占了75%的宽度，剩下的25%空白自然就被下面的div抢了位置。

两个靠谱的解决方案 #

方案1：修改盒模型（快速适配原有代码）

给涉及的div加上box-sizing: border-box，这样width就会包含padding和border的宽度，不会额外撑大元素：

.your-div-class {
  box-sizing: border-box;
}

调整一下宽度计算：第一个div保持left:25%; width:25%;，第二个div改成width:50%; padding-right:25%;——因为box-sizing生效后，50%的宽度已经包含了25%的padding，内容区域实际是25%，刚好和第一个div匹配，首行总宽度就是25%（偏移量）+25%+50%=100%，完美占满整行。

方案2：用Flex布局（更省心的现代方案）

如果可以重构布局结构，Flex是更简单的选择，完全不用纠结宽度计算：

1. 给首行的两个div套一个容器，设置flex布局：

.top-row {
  display: flex;
  width: 100%;
}
.top-row .div-left {
  flex: 0 0 25%;
  margin-left: 25%; /* 对应你要的left偏移效果 */
}
.top-row .div-right {
  flex: 1; /* 自动占据剩余50%宽度 */
  padding-right: 25%; /* 右侧留白，不会影响总宽度 */
}

2. 下面的四个div也套一个flex容器：

.bottom-row {
  display: flex;
  width: 100%;
}
.bottom-row div {
  flex: 0 0 25%; /* 每个固定占25%宽度 */
}

这样不管是首行还是下行，都能精准占满整行，再也不会出现错位问题。

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