如果您查看上面的链接，您会看到.content水平居中，而.side元素固定在.content的左侧。但是，如果将窗口/视口的大小调整为1024或更小，您会注意到.content（900px宽）仍然在主体的1024px宽度限制中心，并且.side被切断。我想设计的是一个居中的.content，当窗口的宽度<= 1024px时，.side元素左侧的空间仍然存在。
我已经玩了一段时间了，并没有任何运气。我希望这里的人比我更有创意。
修改此jsbin的来源答案 0 :(得分：0)
点击此处查看我的修订版：http://jsbin.com/uloyep/8/ 这是你想要的效果吗？
我只是在.side和.content div上设置“float：left”，并增加了包装器的宽度以适应它们。同时从.side div中移除了“position：fixed”和边距，因为浮动完成了这项工作。
答案 1 :(得分：0)
答案 2 :(得分：0)
看起来实现我想要的唯一方法就是使用一点JS。
当窗口/视口为＆lt; = 1148px时，我所做的就是给body元素一个.too-small类。当身体上有一个.too-small类时，我给了.wrap元素一个124px的左边距。这非常有效。
为什么1148而不是1024是身体的最小宽度？因为900 + 124 * 2 = 1148;但为什么124 * 2？那么，124是900px宽.wrap元素两侧的中心位置，当它居中并且视口宽度为1148px时。一旦视口的宽度低于1148，则.wrap元素两侧的空间将为＆lt; 124px会使.side元素被裁剪/截止。所以，在这一点上，我给.wrap元素124px左边距，而不是唯一将被裁剪的部分是右边距。我希望这是有道理的。稍微玩一下，看看它是如何工作的。
如果有纯CSS解决方案，我仍然感兴趣。但是，在那之前，这是我能想到的最好的。