css - PocketGrid:具有固定宽度导航栏的网格布局

Question

我刚刚发现这个非常有趣的网格框架:PocketGrid .

这很有趣，因为它只有 css，没有定义对象宽度的 html 类(所以它完全遵守内容和样式分离的原则，为 html+css 规范定义)，而且它是最小的。

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

我找到了这个链接 How do I float two divs side-by-side without specifying a width?但如果我在导航和内容上方有标题(由于网格布局而 float )，它就不会运行。

请问，你能帮帮我吗？

Answer 1

我是 PocketGrid 的作者。

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

它使用“溢出:隐藏”技巧使主 block 在 2 个固定宽度的侧边栏之间流动!

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;
}

缺点是你需要在主 block 之前声明侧边栏 block ...

希望这对您有所帮助!