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

我刚刚发现了这个非常有趣的Grid Framework：PocketGrid。

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

有几个例子说明了它对链接的强大作用，但是....我没有找到最有趣的例子之一：固定宽度的列（即“导航”）与另一列并排存在的可能性水平空间...

我找到了此链接How do I float two divs side-by-side without specifying a width?，但是如果我在导航和内容上方有标头（由于网格布局而浮动），它将不会运行。

拜托，你能帮我吗？

最佳答案

我是PocketGrid的作者。

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

它使用“ overflow：hidden”技巧使主块在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;
}

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

希望这可以帮助！

关于css - PocketGrid:具有固定宽度的导航列的网格布局，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21118115/