使用骨架框架创建两个列布局

Question

我是骨架框架的新手，并试图为博客项目构建两列布局。到目前为止，这就是我所拥有的：

<section class="list-posts">
  <div class="container">
      <div class="row">
          <div class="nine columns posts">
              [NINE COLUMNS]
          </div><!--nine columns-->
          <div class="three columns aside">
            [ASIDE] 
            [/ASIDE]
          </div>
      </div><!--row-->
  </div>

但是，随着更多的列添加到.posts类中，旁边崩溃了。您的帮助将不胜感激。

Answer 1

不确定我是否理解您的问题，但是如果您要嵌套列，则需要将行div放置在九列中，然后在每十二列中结束行。

如果不是这种情况，您是否可以通过链接或图像对问题进行更具体的澄清。

Answer 2

在等待几个小时之后，我决定弄脏我的手，这就是我所做的

<section class="content">
    <div class="container">
        <div class="row">
            <!--LIST ALL THE POSTS HERE-->
            <div class="twelve columns">
                <div class='twelve'>
                   <div class='row single-entry'>
                      <div class='six columns'>
                         ...
                      </div>
                      <div class='six columns'>
                       ...
                      </div>
                      </div><!--row-->
            </div><!--twelve-->
        </div><!--row-->
        <!-- ASIDE-->
        <div class="four columns aside border-between">
              <div class="row ">
                  <div class="twelve columns">
                    <div class="twelve">
                        <h4 class="standing">Recommendations</h4>
                    </div>
                    <div class="twelve columns recommended-articles">
                        <div class="three columns">
                          <img src="images/footer.png" class="u-max-full-width">
                        </div>
                        <div class="nine columns recommended-articles-details">
                            <h6 class="article-title">4 top SEO trends for 2017</h6>
                            <p class="author_name">Joel Orok</p>
                        </div>
                    </div>
              </div>
          </div>
      </div>
   </section>