2012-03-01 68 views
0

我有这个设计的问题。例如这里: http://zxc.pp.ua/test/05.htmhttp://jsfiddle.net/SkeLLLa/qQRpx/CSS。具有固定位置的侧柱的3列布局

如果浏览器窗口宽度小于1000像素(包装尺寸)出现在滚动,当我将其拖动到右边,中心柱左栏下进入。

如何设置中心元素的“最小边距”?或者如果你知道实现这种布局的替代方法,请告诉我。你已经固定

+0

那么,你想在这种情况下,而不是列的重叠,会怎么样呢? – 2012-03-01 17:39:33

+0

类似于本教程中的内容:http://buildinternet.com/2009/10/purely-css-faking-minimum-margins/ 或使用css3选择器@media屏幕和(最大宽度:1000px) – m03geek 2012-03-01 22:46:23

回答

0

位于其他列,因此它不会显示,如果它的加载屏幕之外或需要滚动以,因为它不动。要么删除固定位置,要么减小包装尺寸。

0

所有read this首先我一直在做CSS一段时间,我总是要引用它。最小宽度为Try this。让我知道如果你仍然有麻烦,也许我不明白你在做什么。

+0

实际上是啊,兄弟们读了第一个链接并重新开始......你的“中心”栏中包含了所有三列。这对我来说从头开始会更容易。下载萤火虫或使用Chrome中的开发者工具。他们将成为拯救生命的人。 – 2012-03-01 18:04:48

+0

我已经读过第一个链接几次。嵌套在中央列没有解决这个问题。最小宽度也不会影响这一点。 – m03geek 2012-03-01 22:38:15

0

有几个选项。

要达到同样的效果,你可以创建你想要的颜色栏的背景图像并设置背景的包装用这一形象,给人暗指三列整个一路下滑。

您也可以在包装中设置三列。设置包装器溢出:隐藏。为每个浮动列提供2000px的底部填充和2000px的负边距。这会将列扩展到包装div的底部,而不会创建额外的滚动。

你也可以看看CSS 3列圣杯:http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm

+0

可能是我们有误会......我曾经说过水平卷轴,它隐藏了左下方的中央列。我不需要拉伸左右列... 圣杯教程很好,但在这种情况下不是。我有2个固定位置的列,我需要它们始终对用户可见,因为中央列是“无尽的”(如goolge +新闻提要等) – m03geek 2012-03-01 23:02:40