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。