css中的嵌套边框布局?

时间:2011-05-28 02:14:04

标签: css layout border-layout

我的工作正常:http://jsfiddle.net/uwcEw/ - css上的传统边框布局。

我想要做的是在边框布局的“中间”内有另一个5区域边框布局。从上面重新应用相同的模式我得到这个:http://jsfiddle.net/6bked/4/已编辑的链接),这不起作用,显然它与它的父容器无关,但我不确定如何解决这个问题,以便我可以在嵌套的上下文中根据需要应用此模式。

有任何帮助吗?此外,如果有更好的方法(Compass + Sass / blueprint / js布局),我愿意接受建议。

更新

我还想说清楚我只关心在现代浏览器(Webkit,FF)中工作,主要关注Webkit,我并不担心没有启用javascript的用户

1 个答案:

答案 0 :(得分:0)

我并不是固定布局的最大粉丝,但如果我理解正确,那应该是你要做的事情:http://jsfiddle.net/8Cq9A/

维度是相对于浏览器窗口的,甚至是div的嵌套集。修复布局需要做的是调整内部尺寸,并考虑到这一点。例如,如果您的左外{和右div的宽度设置为10%(表示浏览器窗口宽度的10%),则将中心div拆分为两个相等的一半,你将它们的每个宽度设置为:(100% - 10% - 10%)/ 2 = 40%。

就个人而言,我会考虑使用花车:http://jsfiddle.net/Sf8Kp/。但是,您将遇到的问题是,如果您想要在链接中看到相同高度的列。

有很多很多文章在如何解决这个问题。一些好的读物已经存在了一段时间:alistapart(12),positioniseverything。搜索人造柱 3列[液体|弹性|相等高度]布局