0

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

HTML 布局是 3 个 div

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

    .....

    </div>

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

       ....
    </div>


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

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

无风格

@import "components/grid.less"; 为了使用屏幕的全宽，我不得不增加最后 2 个 div 的列数。

底部 {

#about {
 .column(6);
}

#contact {
  .column(4);

}

#locations {
 .column(4);

}

虽然，现在它似乎添加了 16 列（6+4+4并且我没有更改默认的@columns:12）。虽然浏览器中的渲染仍然很好，但我想知道为什么我不能简单地使用 column(3); 对于最后 2 个 div。除非我错过了某事，否则它似乎不一致。我希望我能弄清楚为什么。

提前致谢

4

1 回答 1

0

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

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

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

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

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

当您不使用具有固定宽度的容器时，由于float:left.

于 2015-01-07T13:16:05.460 回答