如何使用Skeleton設置嵌套網格

Question

我想在我的網站頁面的主要內容區域添加網格圖像和內容。 我有一個基本的兩列模板，我想將網格放在大內容區域。一切正常，但只要我調整到肖像，我放鬆了所有我在divs之間的利潤。我不太確定將這些項目分組在框架中的正確方法是什麼。我是否需要結束每行的容器？任何幫助或建議非常感謝。

<div class="container"> 
    <div class="four columns"></div> 
    <div class="twelve columns"> 

     <!-- grid goes here --> 
     <div class="container"> 
     <div class="six columns alpha"></div> 
     <div class="six columns omega"></div> 
     <div class="six columns alpha"></div> 
     <div class="six columns omega"></div> 
     </div> 


    </div><!-- end twelve columns> 
</div><!-- end container --> 

Answer 1

我看到沒有人回答過此事。我假設你已經解決了這個問題，所以這個答案是其他人試圖找到的

問題是container類的固定寬度爲960像素，所以你不能將它們嵌套。第二個問題是內部的列（你試圖嵌套）超過列數。 See the 'clearfix' class。隨口說說，這是我找到了乾淨的解決方案：

<div class="container"> 
    <div class="four columns">four columns</div> 
    <div class="twelve columns"> 
     <div class="sixteen columns clearfix">                             
      <div class="three columns alpha"> first</div> 
      <div class="three columns">second</div> 
      <div class="three columns">third</div> 
      <div class="three columns omega">fourth</div> 
     </div><!-- end clearfix --> 
    </div><!-- end twelve columns> 
</div><!-- end container --> 

Answer 2

，我錯過了，我第一次看到這個答案是，在阿拉法的列標剛好三列的一部分。所以對於第一列使用alpha和最後一列使用歐米茄。最初的問題不起作用，因爲他們有兩個阿爾法和omegas。如果你看看css alpha和omega，只需給他們左邊（alpha）或右邊（omega）的0px邊距。