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

帖子的渲染方式与我想要的完全一样，但是他们的父.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排成一行，则会清除列mixin设置的浮点数。

.post {
  @include row();
}

请参阅演示：http://www.sassmeister.com/gist/51b7247657fd4557bdc2e62298ad4005

Divs渲染在外部容器外面？

1 个答案: