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