如何將depthgrid「響應流體」風格推到右側？

我正在使用深奧的網格框架來構建響應流體網格佈局。基本上我想要實現的是創建一個包含6列的佈局，其中菜單容器位於左側，列寬爲1，內容位於右側，列寬爲5列。在內容中，我有一個也是流動的嵌套網格。如何將depthgrid「響應流體」風格推到右側？

我有網格工作作爲響應流體例子可以在這裏找到：http://www.profoundgrid.com/examples/fluidresponsive.html

的SCSS代碼我是這樣的：

#row{ 
    div{@include column(6);} 
    .col1{@include column(2);} 
    .col5{@include column(10);} 
    @include generate_grid_positions(div, 1); 
}

的HTML看起來像這樣：

<article id="row"> 
     <div id="menuContainer" class="col1">Menu <br />menu <br />menu</div> 
     <div id="contentContainer" class="col5"> 
      <div id="projectContainer"> 
       <div class="project">project1</div> 
       <div class="project">project2</div> 
       <div class="project">project3</div> 
       <div class="project">project1</div> 
       <div class="project">project2</div> 
       <div class="project">project3</div> 
      </div> 
      <div id="socialContainer">sadfgsdfg</div> 
     </div> 
    </article>

我現在所擁有的是一個流體響應網格，但兩個div都相互疊加。我想知道如何將內容2列推到右側。

來源

2013-10-10 Bart Burg

問題是？我如何製作一個div？你的html在哪裏？ –

對不起，你是對的，它是模糊的。我更新了問題 –

@include generate_grid_positions（div，2）;似乎推動它恰到好處，雖然它只是這種情況下的解決方案。我仍然不明白我該如何使用它。 –

像這樣：

<article class="grid1"> 
    <div class="col2 push0">menu</div> 
    <div class="col2 push2">c1</div> 
    <div class="col2 push4">c2</div> 
    <div class="col2 push6">c3</div> 
    <div class="col2 push8">c4</div> 
    <div class="col2 push10">c5</div> 
</article>

合併5右列：

<article class="grid1"> 
    <div class="col2 push0">menu</div> 
    <div class="col10 push2">5 times width</div> 
</article>

，並確保您瞭解並不多（becoz它複製從OP鏈接粘貼），您的解決方案是：

<article> 
    <div class="col3">left</div> 
    <div class="col9 push3">right</div> 
</article>

來源

2013-10-10 15:05:11

這適用於固定網格，但不適用於流體響應。 –

如何將depthgrid「響應流體」風格推到右側？

回答

相關問題