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