我的工作正常： http://jsfiddle.net/uwcEw/ - css 上的传统边框布局。
我想要做的是在边框布局的“中间”内有另一个 5 区域边框布局。重新应用上面相同的模式我得到： http://jsfiddle.net/6bked/4/ （编辑的链接），它不起作用，显然它与它的父容器无关，但我不知道如何解决这个问题，所以我可以根据需要在嵌套中应用此模式语境。
有什么帮助吗？另外，如果有更好的方法来做到这一点（Compass+Sass/blueprint/js 布局），我愿意接受建议。
更新
我还想澄清一下，我只关心现代浏览器（Webkit、FF）中的工作，主要关注 Webkit，我不担心没有启用 javascript 的用户
I have this working fine: http://jsfiddle.net/uwcEw/ - a traditional border layout on css.
What I want to do is have another 5-region border layout within the "middle" of the border layout. Re-applying the same pattern from above I get this: http://jsfiddle.net/6bked/4/ (edited link), which does not work, clearly it is not relative to it's parent container, but i'm not sure how to fix this so i can apply this pattern as needed in a nested context.
Any help? Also if there's a better way to do this (Compass+Sass/blueprint/js layout) I'm open to suggestions.
UPDATE
I also wanted to make clear I only care about this working in modern browsers (Webkit, FF) mostly concerned with Webkit and I am not worried about users who don't have javascript enabled
发布评论
评论（1）
我并不是固定布局的最大粉丝，但如果我理解正确的话，这应该就是您想要做的： http://jsfiddle.net/8Cq9A/。
尺寸是相对于浏览器窗口的，甚至是嵌套的
div集。修复布局所需要做的就是调整内部尺寸，并考虑到这一点。例如，如果您的外部左侧和右侧div的宽度设置为10%（即浏览器窗口宽度的10%）以分割中心div分成相等的两半，您可以将每个宽度设置为：(100% - 10% - 10%) / 2 = 40%。就个人而言，我会考虑使用浮动：http://jsfiddle.net/Sf8Kp/。不过，您在这里会遇到的问题是，如果您想要链接中所示的等高列。
不过，有很多关于如何解决这个问题的文章。一些已经存在了一段时间的好读物：alistapart (1, 2），定位一切。搜索假列和3列[液体|弹性|等高]布局。
I'm not exactly the biggest fan of fixed layouts, but if I understand correctly this should be what you're trying to do: http://jsfiddle.net/8Cq9A/.
The dimensions are relative to the browser window, even the nested set of
div's. What you needed to do to fix your layout was adjust your inner dimensions taking that into account. For example if your outer left and rightdiv's widths are set to 10% (meaning 10% of the width of the browser window) to split the centerdivinto 2 equal halves, you'd set each of their widths to: (100% - 10% - 10%) / 2 = 40%.Personally, I'd look into using floats: http://jsfiddle.net/Sf8Kp/. The issue you will run into here though, is if you're wanting equal height columns as seen in the link.
There are MANY articles floating around on how to tackle this though. A few good reads that have been around for a while: alistapart (1, 2), positioniseverything. Search around for faux columns and 3 column [liquid|elastic|equal height] layout.