3

我想从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 个部分（当然还有边距）......但是如何？我可以使用 3 列 5 次，但总共可以计算 15 列。有没有办法做到这一点？

4

3 回答 3

0

您将无法从标准骨架版本 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 */
}

顺便说一句，我省略了一些行。然后只需输入其中之一：

<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 列以上的任何东西。

于 2014-04-25T12:45:40.560 回答
0

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

但是，如果您访问 Skeleton 主页，那里有一个网格系统演示。只需检查源代码，它会为您提供：

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

希望这可以帮助 ：）

于 2014-03-26T14:49:25.330 回答
0

以为我会用我的解决方案更新它。

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

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

只需添加它来代替普通的列类，例如，

<div class="col-5 columns">

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

虽然还没有发现任何问题。

于 2015-07-19T12:35:35.730 回答