底部{

Question

我到处寻找答案。我在semantic.gs中使用grid.less并且运行正常。我只是在模板的一个部分遇到问题。据我所知，网格列默认情况下总计为12。但是，对于我的模板的一个特定部分，布局不会在屏幕的整个宽度上扩展。

HTML 布局是3 divs

    <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＆＃34; components / grid.less＆＃34 ;; 为了使用屏幕的整个宽度，我不得不增加最后2个div的列数。

底部{

#about {
 .column(6);
}

#contact {
  .column(4);

}

#locations {
 .column(4);

}

虽然现在看来它最多可以添加16列（ 6 + 4 + 4 ，我没有更改默认的@columns：12）。虽然浏览器中的再现仍然很好，但我想知道为什么我不能简单地使用列（3）;为最后两个div。除非我错过了，否则它似乎不一致。我希望我能弄明白为什么。

提前致谢

Answer 1

6 + 4 + 4 = 14而不是16.我不明白为什么你不能将列（3）用于你的最后一个div？这样做会发生什么？

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

网格系统使用硬编码宽度。每行有12列960/12像素= 80像素（包括每边10个像素的边距（给出2 x 10 = 20px的装订线））。

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

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

当您不使用具有固定宽度的容器时，所有列将彼此相邻显示，直到它们的宽度总和等于屏幕宽度（或视口的宽度），因为{{ 1}}。

semantic.gs GRID - 关于添加到12个以上的列的问题

底部{

1 个答案: