Divs渲染外部容器？

Question

我有一大堆的職位外容器內呈現的：

<div class="wrapper"> 
<div class="content">  
    <div class="post"> 
     <article> 
      <div class="artimg"> 
       <img src="images/some-image.png" alt="some alt text"> 
      </div> 

      <div class="postcontent"> 
       <h2><a href="#">Title text</a></h2> 
       <p>Lorem ipsum blah blah.</p> 
      </div> 
     </article> 
    </div>  
</div> <!-- End content --> 
<div class="sidebar"> 
    ...sidebar stuff... 
</div> <!-- End sidebar --> 
    <div class="footer"> 
</div><!-- End footer --> 

而且職位渲染正是我希望他們的方式，但他們的父母。員額的div只是在渲染空在.wrapper div頂部的頁面頂部。這是我的scss：

.artimg { 
    @include span-columns(3 of 9); 
} 

.postcontent { 
    @include span-columns(6 of 9); 
    @include omega(); 
} 

.wrapper { 
    @include outer-container; 
} 


.content { 
    @include span-columns(9); 
} 

.sidebar { 
    @include span-columns(3); 
    padding:10px; 
    @include omega(); 
} 

我不明白，我錯過了什麼嗎？

Answer 1

我想你需要一個row()在這裏涉及。如果.post被製成一行，那麼它將清除由列混合所設置的浮動。

.post { 
    @include row(); 
} 

觀看演示：http://www.sassmeister.com/gist/51b7247657fd4557bdc2e62298ad4005