具有左侧边栏空间的水平居中内容

时间:2013-01-24 00:46:50

标签: css layout

http://jsbin.com/uloyep/2

如果您查看上面的链接,您会看到.content水平居中,而.side元素固定在.content的左侧。但是,如果将窗口/视口的大小调整为1024或更小,您会注意到.content(900px宽)仍然在主体的1024px宽度限制中心,并且.side被切断。我想设计的是一个居中的.content,当窗口的宽度<= 1024px时,.side元素左侧的空间仍然存在。

我已经玩了一段时间了,并没有任何运气。我希望这里的人比我更有创意。

您可以在http://jsbin.com/uloyep/2/edit

修改此jsbin的来源

3 个答案:

答案 0 :(得分:0)

点击此处查看我的修订版:http://jsbin.com/uloyep/8/ 这是你想要的效果吗?

我只是在.side和.content div上设置“float:left”,并增加了包装器的宽度以适应它们。同时从.side div中移除了“position:fixed”和边距,因为浮动完成了这项工作。

答案 1 :(得分:0)

这是怎么回事?您使包装器仅适合您的内容,然后居中对齐内容。

http://jsbin.com/uloyep/31


最终答案:http://jsbin.com/uloyep/49/

答案 2 :(得分:0)

看起来实现我想要的唯一方法就是使用一点JS。

http://jsbin.com/uloyep/47

当窗口/视口为&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解决方案,我仍然感兴趣。但是,在那之前,这是我能想到的最好的。