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

Answer 2

我第一次看到这个答案时错过的部分是Alpha和Omega之间的列只标记为三列。所以对于第一列使用alpha和最后一列使用omega。最初的问题不起作用，因为他们有两个alpha和omegas。如果你看一下css alpha和omega，只需在左（alpha）或右（omega）上给它们0px的边距。

如何使用Skeleton设置嵌套网格

2 个答案: