如何将Skeleton CSS样板划分为5列？ [英] How do I divide the Skeleton CSS boilerplate into 5 columns?

问题描述

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

I would like to start with the Skeleton CSS boilerplate from http://getskeleton.com/ It's the first time I have designed and scripted with a 960gs template, and I totally don't get it.

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

According to a few tutorials, I understand that width of the page consists of 16 column units. For example, you can divide your page into ten-unit column and a six-unit column:

我将以下代码直接从骨架layout.css： / p>

I took the following code straight away from the skeleton 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列。有没有办法做到这一点？

The problem is that I would like to divide my page into 5 parts (with margin, of course)... But how? I could use three columns 5 times, but that would count up to a total of 15 columns. Is there any way to do this?

推荐答案

以为我会更新这个与我的解决方案。

Thought I'd update this with my solution.

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

For the new Skeleton framework (currently V2.0.4) with percentage based widths, I was experimenting and found adding this worked for me.

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

只需添加此代替正常列类，例如

Just add this in place of the normal column classes e.g.,

<div class="col-5 columns">

填充只是我个人喜好的。

The padding is just a preference for my particular case.

虽然没有发现任何问题。

Haven't found any problems with it yet though.

这篇关于如何将Skeleton CSS样板划分为5列？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！