semantic.gs网格-关于添加超过12列的问题

Question

我到处找答案。我正在使用来自semantic.gs的semantic.gs，并且工作很好。我只是对我的模板的一个部分有一个问题。据我所知，默认情况下，网格列加为12列。但是，对于我的模板中的一个特定部分，布局不会扩展到屏幕的整个宽度。

布局为3div

    <div id="about">
        <h3>About</h3>

    .....

    </div>

    <div id="contact">
      <h3>Contact</h3>

       ....
    </div>


    <div id="locations">
      <h3>Locations</h3>
      .......
    </div>  

</section><!-- #bottom-->

style.less

@import "components/grid.less"；为了使用屏幕的全部宽度，我必须为最后两个div增加列的#。

底部{

#about {
 .column(6);
}

#contact {
  .column(4);

}

#locations {
 .column(4);

}

尽管如此，现在它似乎加起来有16列(6+4+4和我没有更改默认的@列:12)。当浏览器中的呈现仍然正常时，我想知道为什么不能简单地为最后两个div使用列(3)。除非我想念某物，否则似乎不一致。我真希望我能找出原因。

提前感谢

Answer 1

6+4+4= 14而不是16。我不明白为什么你不能用列(3)作为你的最后一个div？这样做会发生什么？

要了解网格系统，您应该检查http://semantic.gs/examples/fixed/fixed.html

网格系统使用硬代码宽度。每行有12列，960 / 12像素= 80像素(包括每边10像素的边距(给出2x10=20 on的沟槽))。

网格要求将行包装在容器中。上面提到的示例使用一个<div class="center"></div>容器。div.center容器的较少代码是：

// center the contents
div.center {
    width: ((@column-width + @gutter-width) * @columns)px;//960px by default
    margin: 0 auto;
    overflow: hidden;
}

当您不使用固定宽度的容器时，所有的列都会互相显示，直到它们的宽度之和等于由于float:left而导致的屏幕宽度(或视图端口的宽度)。