PocketGrid:具有固定宽度的导航列的网格布局 [英] PocketGrid: Grid Layout with fixed width navigation column

问题描述

我刚刚发现了这个非常有趣的Grid Framework: PocketGrid .

I just found this very interesting Grid Framework: PocketGrid.

这很有趣，因为它仅是CSS，而没有用于定义对象宽度的html类(因此，它完全尊重关于内容和样式之间的分离的原理，是为html + css规范定义的)，并且它是最小的.

It's interesting beacuse it is only css, no html classes to define object width (so it totally respects principle about separation between content and style, defined for html+css specs), and it's minimal.

有几个例子说明了它对链接的强大影响，但是....我没有找到最有趣的例子之一:固定宽度的列(即导航")与另一个跨过另一边的可能性在所有剩余的水平空间上....

There are several example of it's power onto the link but.... I didn't find one of the most interesting: possibility to have a fixed width of a column (i.e. Navigation one) sided by another one that instead spans on all remaining horizonal space....

我找到了此链接如何在不指定宽度的情况下并排浮动两个div?，但是如果在导航和内容上方有标头(由于网格布局而浮动)，它将无法运行.

I found this link How do I float two divs side-by-side without specifying a width? but it does not run if I have an header (floated due to Grid layout) above navigation and content.

请，你能帮我吗?

推荐答案

我是PocketGrid的作者.

I'm the author of PocketGrid.

我为您的问题制作了一个JSFiddle示例: http://jsfiddle.net/arleray/4ZU64/

I made a JSFiddle example for your problem: http://jsfiddle.net/arleray/4ZU64/

它使用"overflow:hidden"技巧使主块在2个固定宽度的侧边栏之间流动！

It uses the "overflow:hidden" trick to make the main block fluid between 2 fixed-width sidebars!

HTML:

<div class="block-group">
    <div class="header block">Header</div>
    <div class="left-sidebar block">Left sidebar (fixed width)</div>
    <div class="right-sidebar block">Right sidebar (fixed width)</div>
    <div class="main block">Main (fluid)</div>
    <div class="footer block">Footer</div>
</div>

CSS:

.left-sidebar { width: 200px; }

.right-sidebar { width: 200px; float: right; }

.main {
    overflow: hidden;
    float: none;
    width: auto;
    min-width: 1px;
}

缺点是您需要在主块之前声明侧边栏块...

The drawback is that you need to declare the sidebar blocks before the main block...

希望这会有所帮助！

这篇关于PocketGrid:具有固定宽度的导航列的网格布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！