Question

我想从http://getskeleton.com/开始使用Skeleton CSS样板文件这是我第一次使用960gs模板设计和编写脚本，而且我完全没有得到它。

根据一些教程，我知道页面的宽度由16个列单元组成。例如，您可以将页面划分为十单元列和六单元列：

我直接从骨架layout.css中获取了以下代码：

 /* Base Grid */
.container .one.column,
.container .one.columns                     { width: 40px;  }
.container .two.columns                     { width: 100px; }
.container .three.columns                   { width: 160px; }
.container .four.columns                    { width: 220px; }
.container .five.columns                    { width: 280px; }
.container .six.columns                     { width: 340px; }
.container .seven.columns                   { width: 400px; }
.container .eight.columns                   { width: 460px; }
.container .nine.columns                    { width: 520px; }
.container .ten.columns                     { width: 580px; }
.container .eleven.columns                  { width: 640px; }
.container .twelve.columns                  { width: 700px; }
.container .thirteen.columns                { width: 760px; }
.container .fourteen.columns                { width: 820px; }
.container .fifteen.columns                 { width: 880px; }
.container .sixteen.columns                 { width: 940px; }

.container .one-third.column                { width: 300px; }
.container .two-thirds.column               { width: 620px; }

问题在于我想把我的页面分成5个部分（当然还有边距）...... 但是怎么样？我可以使用三列5次，但总共可以计算15列。有没有办法做到这一点？

Answer 1

这些是我发现的最好的Skeleton系列教程。他们真的帮了我：https://www.youtube.com/watch?v=QFYkSqBvCAs

但是，如果你去Skeleton主页那里有一个网格系统演示。只需检查来源，即可：

<div class="five columns alpha">Five</div>

希望这会有所帮助：）

Answer 2

您无法从标准骨架版本1.2中获得五列。但是你可以在skeleton.css中添加一些行：

/* Base Grid */
.container .one.column,
.container .one.columns                     { width: 40px;  }
.container .two.columns                     { width: 100px; }
.container .three.columns                   { width: 160px; }
.container .four.columns                    { width: 220px; }
.container .five.columns                    { width: 280px; }
.container .six.columns                     { width: 340px; }
.container .seven.columns                   { width: 400px; }
.container .eight.columns                   { width: 460px; }
.container .nine.columns                    { width: 520px; }
.container .ten.columns                     { width: 580px; }
.container .eleven.columns                  { width: 640px; }
.container .twelve.columns                  { width: 700px; }
.container .thirteen.columns                { width: 760px; }
.container .fourteen.columns                { width: 820px; }
.container .fifteen.columns                 { width: 880px; }
.container .sixteen.columns                 { width: 940px; }

.container .one-third.column                { width: 300px; }
.container .two-thirds.column               { width: 620px; }
.container .one-fifth.column                { width: 176px; }    /* <--- Right here */

跳到这里：

@media only screen and (min-width: 768px) and (max-width: 959px) {
    .container                                  { width: 768px; }
    .container .column,
    .container .columns                         { margin-left: 10px; margin-right: 10px;  }
    .column.alpha, .columns.alpha               { margin-left: 0; margin-right: 10px; }
    .column.omega, .columns.omega               { margin-right: 0; margin-left: 10px; }
    .alpha.omega                                { margin-left: 0; margin-right: 0; }

    .container .one.column,
    .container .one.columns                     { width: 28px; }
    .container .two.columns                     { width: 76px; }
    .container .three.columns                   { width: 124px; }
    .container .four.columns                    { width: 172px; }
    .container .five.columns                    { width: 220px; }
    .container .six.columns                     { width: 268px; }
    .container .seven.columns                   { width: 316px; }
    .container .eight.columns                   { width: 364px; }
    .container .nine.columns                    { width: 412px; }
    .container .ten.columns                     { width: 460px; }
    .container .eleven.columns                  { width: 508px; }
    .container .twelve.columns                  { width: 556px; }
    .container .thirteen.columns                { width: 604px; }
    .container .fourteen.columns                { width: 652px; }
    .container .fifteen.columns                 { width: 700px; }
    .container .sixteen.columns                 { width: 748px; }

    .container .one-third.column                { width: 236px; }
    .container .two-thirds.column               { width: 492px; }
    .container .one-fifth.column                { width: 137.6px; }    /*  <--- And Right der */
}

我省略了一些行btw。然后扔掉其中一个：

<div class="column one-fifth alpha">1</div>
<div class="column one-fifth">2</div>
<div class="column one-fifth">3</div>
<div class="column one-fifth">4</div>
<div class="column one-fifth omega">5</div>

完成后，将在不久的将来添加示例。就个人而言，我认为5列网格太窄，并且在可能的情况下远离4列以上的任何内容。

Answer 3

以为我用我的解决方案更新了这个。

对于基于百分比宽度的新Skeleton框架（目前为V2.0.4），我正在尝试并发现添加这对我有用。

.col-5.columns { 
    width: 16.3333333333%;
    padding-right: 10px;
}

只需添加此代替普通列类，例如

<div class="col-5 columns">

填充只是我特定情况的偏好。

但是，Haven没有发现任何问题。

如何将Skeleton CSS样板分为5列？

3 个答案: