Css 响应性设计屏幕宽度超过960像素

我正在基于本文创建一个响应性网站

但是我为超过980像素宽的屏幕添加了这段代码

 /* for more than 980px */
@media screen and (min-width: 981px)

{
#pagewrap {
width: 94%; 
}

#content {
width: 20%;
}

#middle {
width: 50%;
}

#sidebar {
width: 20%;
}

}

您可以在codepen中看到结果

当我将宽度设置为#中间50%或49% 并将浏览器宽度调整为接近990px的大小 第三个内容区位于另外两个区域的底部 但当宽度设置为48%时，我的意思是现在3个区域彼此相邻

但现在又出现了另一个问题。 当浏览器大小接近1395像素时（我的笔记本电脑） 第三个内容区和包装器边框之间有53px的间隙，如下所示（我不希望有这种间隙）

---

有什么建议吗？

您遇到的是盒子模型问题。你看，你已经设置了宽度，但是边距、填充物和边框都和盒子的实际计算宽度相混淆。更糟糕的是，这些边距/填充/边框是用像素定义的，而宽度是用百分比定义的

要实现所需，应使用

边框框

框模型

#content, #middle, #sidebar {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

现在，当你说宽度：50%这意味着“使我的框的宽度为50%，包括任何填充和边框”（注意，不是边距）

---

使用

边框框

来布局您的列会对您有很大帮助，但这需要您更改计算。

检查一下，您的50px间距似乎是由于#pagewrap的94%宽度造成的？