Question

我刚刚发现了这个非常有趣的网格框架：PocketGrid。

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

它有几个例子，它的力量到链接，但....我没有找到一个最有趣的：可能有一个固定宽度的列（即导航一个）侧面的另一个，而不是跨越在所有剩余的水平空间....

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

拜托，你能帮助我吗？

Answer 1

我是PocketGrid的作者。

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

它使用“溢出：隐藏”技巧使主块在两个固定宽度的侧边栏之间流动！

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

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

希望这有帮助！

Answer 2

我对PocketGrid很陌生，因为我今天才发现它。如果我滥用您的网格框架，请原谅我......

这是一种替代方法，不需要使用calc()，并允许您在侧边栏之前或您喜欢的任何顺序标记main内容。

这需要一个包含主要块和侧边栏的额外容器div。此容器div相对于允许2个固定宽度侧边栏的绝对定位。

HTML：

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

CSS：

/* Smartphone version
   Nothing to do: blocks are stacked by default. */

.middle {
    position: relative;
}

/* Tablet version */
@media (min-width: 600px) {
  .left-sidebar { width: 200px; position: absolute; left: 0; top: 0; bottom: 0; }

  .right-sidebar { width: 200px; position: absolute; right: 0; top: 0; bottom: 0; }

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

.main .box { background-color: #CFD; }
.left-sidebar .box, .right-sidebar .box { background-color: #CDF; }

同样在jsfiddle。

PocketGrid：具有固定宽度导航列的网格布局

2 个答案: