skeleton-css-boilerplate - 如何使用 Skeleton 设置嵌套网格

Question

我想在我的网站页面的主要内容区域中添加一个图像和内容网格。
我有一个基本的两列模板，我想将网格放置在大内容区域中。一切正常，但是一旦我调整为纵向，我就会失去 div 之间的所有边距。我不太确定将这些项目分组到骨架中的正确方法是什么。我需要为每一行结束我的容器吗？非常感谢任何帮助或建议。

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