Focus Blog主题（WordPress）文本容器宽度调整问题求助

嘿，我来帮你拆解这两个布局问题，都是前端开发里常见的小坑，咱们一步步捋清楚：

一、移动端容器宽度不生效的核心原因 #

1. 盒模型“偷偷”加了额外宽度 #

浏览器默认的盒模型是content-box——也就是说你设置的width:95%只算内容区的宽度，如果你的.wrp元素本身有padding或者border，那实际整体宽度会是95% + padding + border，自然就超了，看起来就像宽度没生效。

解决办法很简单，强制把盒模型改成border-box，让padding和border都算在你设置的宽度里：

@media screen and (max-width: 768px) { 
  .wrp { 
    box-sizing: border-box !important; /* 关键新增 */
    margin: 0 2.5% !important; 
    width: 95% !important; 
  } 
}

2. 父元素给你“套了个框” #

如果.wrp的父元素（比如某个外层容器）设置了固定宽度（比如width:1000px）或者最大宽度（max-width:1200px），那不管你给.wrp设多少百分比，都只能在父元素的范围内缩放，自然没法占满屏幕宽度。

你可以右键元素→检查，往上找父元素，看看它们的宽度设置。如果父元素有固定宽，把它改成width:100%就行。

3. 其他CSS规则抢了优先级 #

可能有比你的媒体查询更“权重高”的规则覆盖了宽度设置——比如带父元素的选择器（.container .wrp）或者内联样式。你可以在开发者工具的Styles面板里看.wrp的宽度规则，如果那条width:95%被划掉了，说明被覆盖了。

这种情况要么提升选择器的特异性（比如写成body .wrp），要么检查有没有其他地方的样式冲突，把冲突的规则改掉。

二、桌面端两栏无法铺满的问题 #

你算的百分比加起来看似接近100%，但别忘了.sAs还有margin-left:20px！百分比是相对于父容器宽度的，20px是固定值，两者加起来肯定超过100%，浏览器要么把第二栏挤换行，要么压缩宽度，自然没法铺满。

要实现目标网站的铺满效果，推荐两种方案：

方案1：用Flexbox搞定（最省心） #

把父容器.cnt改成flex布局，它会自动帮你分配空间，还能轻松控制间距：

.cnt {
  display: flex;
  width: 100%;
  gap: 20px; /* 用gap代替margin-left，控制两栏之间的间距 */
}
.cnt .bSe.left, .cnt .bSe.right {
  flex: 0 0 67.59%; /* 固定占比 */
}
.cnt .sAs {
  flex: 0 0 calc(32.41% - 20px); /* 100%-67.59%=32.41%，再减去gap的20px */
  margin-left: 0; /* 去掉原来的margin-left */
}

这种方式在不同分辨率下适配性最好，也是现在主流的布局方式。

方案2：精确计算百分比（适合不想改布局的情况） #

如果不想用flex，就得精确算好宽度和margin的总和：

.cnt {
  width: 100%;
  box-sizing: border-box;
}
.cnt .bSe.left, .cnt .bSe.right {
  width: calc(67.59% - 13.7px); /* 减去一部分宽度，给margin留空间 */
  float: left;
}
.cnt .sAs {
  margin-left: 20px;
  width: 30.55%;
  float: left;
}

不过这种方式需要精准计算，不同屏幕下可能会有适配问题，不如flex灵活。

小技巧：用开发者工具快速定位问题 #

不管是移动端还是桌面端，按F12打开开发者工具，选中对应的元素，看Computed面板里的实际宽度、margin、padding数值——一眼就能看出是哪里多了或者少了，比瞎猜高效多了！

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