如何实现复杂的CSS布局?
问题描述:
我有一个页面here。有一个内容面板和一个内容面板。我想将内容居中,并将内容面板推到右上角。这种行为已经起作用。如何实现复杂的CSS布局?
但是,布局不工作,因为我希望当页面收缩时。理想情况下,内容将被推到屏幕的右侧,并在内容和内容之间保持空白。但是,目前内容只是与内容重叠,而这并不是我想要的内容。
这样的布局可能,而不诉诸于JavaScript?
编辑:您可能会注意到页面边缘的滚动条。该滚动条是而不是的body
的滚动条,但div#main
的,原因是我不希望内容滚动页面。
答
我相信可以使用容器上的最小宽度属性来实现。预计ie6的问题。它不能识别最小宽度声明。
答
不只是最小宽度。我成功地实现通过执行以下布局:
对于#main
附加(调整值以满足您的需要):
- 最小宽度:950像素;
对于#contents
添加:
- 浮动:右;
- margin-top:5px;
- margin-right:20px;
对于#contents ol
删除:
- 位置
- 权
- 顶部
+1似乎工作。这里有一个[小提琴](http://jsfiddle.net/b62tA/)供那些想要试用的人使用。 – Matt 2010-06-05 21:32:35
糟糕。看起来我忘了提及内容应该不滚动。 “position:absolute”是一个跨浏览器的替代方案:fixed。 @Matt:小提琴的+1 – Eric 2010-06-05 21:32:50
现在想想清楚也许已经太晚了,但是我不认为在使用float的时候可以获得一个固定的位置(没有javascript)......为什么不移动左侧的内容并使用最小宽度结合绝对位置? – 2010-06-05 21:47:35