在CSS中嵌套边框布局? [英] Nested border layout in css?

问题描述

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

I have this working fine: http://jsfiddle.net/uwcEw/ - a traditional border layout on css.

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

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.

有帮助吗?另外，如果有更好的方法(Compass + Sass/blueprint/js布局)，我欢迎您提出建议.

Any help? Also if there's a better way to do this (Compass+Sass/blueprint/js layout) I'm open to suggestions.

更新

我还想明确地说，我只关心在主要与Webkit有关的现代浏览器(Webkit，FF)中的工作，我不担心未启用JavaScript的用户

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

推荐答案

我并不是固定布局的忠实拥护者，但是如果我理解正确，这应该是您要尝试做的事情:

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/.

尺寸是相对于浏览器窗口的，甚至是嵌套的div的尺寸.修复布局所需要做的就是考虑到这一点来调整内部尺寸.例如，如果您的左和右div外部宽度设置为10％(表示浏览器窗口宽度的10％)，以将中心div分成两个相等的一半，您可以将其每个宽度设置为:(100％-10％-10％)/2 = 40％.

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 right div's widths are set to 10% (meaning 10% of the width of the browser window) to split the center div into 2 equal halves, you'd set each of their widths to: (100% - 10% - 10%) / 2 = 40%.

我个人会考虑使用浮点数: http://jsfiddle.net/Sf8Kp/.不过，您会遇到的问题是，如果您想要的是相等高度的列，如链接中所示.

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.

有很多关于如何解决此问题的文章.一些已经读了一段时间的好读物:alistapart( 1 ， 2 )，位置是一切.到处搜索人造柱和 3柱[液体|弹性|等高]布局.

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.

这篇关于在CSS中嵌套边框布局?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！