3

http://getskeleton.com/のSkeletonCSSボイラープレートから始めたいと思い ます。960gsテンプレートを使用して設計およびスクリプトを作成するのは初めてですが、まったく理解できません。

いくつかのチュートリアルによると、ページの幅は16列単位で構成されていることを理解しています。たとえば、ページを10単位の列と6単位の列に分割できます。

スケルトン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

これを自分のソリューションで更新すると思いました。

パーセンテージベースの幅を持つ新しい Skeleton フレームワーク (現在は V2.0.4) の場合、私は実験していて、これを追加するとうまくいくことがわかりました。

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

これを通常の列クラスの代わりに追加するだけです。

<div class="col-5 columns">

パディングは、私の特定のケースの単なる好みです。

それでもまだ問題は見つかっていません。

于 2015-07-19T12:35:35.730 に答える
0

これらは、私が見つけた Skeleton の最高のチュートリアル シリーズです。彼らは本当に私を助けてくれました: https://www.youtube.com/watch?v=QFYkSqBvCAs

ただし、Skeleton のホームページにアクセスすると、そこにグリッド システムのデモがあります。ソースを検査するだけで、次のことが得られます。

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

お役に立てれば ：）

于 2014-03-26T14:49:25.330 に答える