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

Question

我刚刚发现这个非常有趣的Grid Framework：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/

，使用“溢出：隐藏”技巧，使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; 
} 

的缺点是，你需要的主块之前声明侧边栏块...

希望这有助于！

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。