Div 在外部容器外渲染？

Question

我在外部容器中渲染了一堆 posts：

<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 -->

并且 post 完全按照我希望的方式呈现，但它们的父 .post 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

Div 在外部容器外渲染？

Divs rendering outside outer-container?

sass

bourbon

neat