12分割カラム分けテスト

範囲を12分割して左にフロートさせることができます。

1:1(均等2分割)に分けたい場合の例

例えば1:1に分けたい場合は、6+6=12なので以下のようにテキストモード状態で書きます。
最後、フロートを終わらせたい場所にclを入れてください。

<div class=”col-6″ >2分割カラム分けテストです。2分割カラム分けテストです。</div>
<div class=”col-6″ >2分割カラム分けテストです。2分割カラム分けテストです。</div>
<div class=”cl” ></div>

yajirusi

2分割カラム分けテストです。2分割カラム分けテストです。
2分割カラム分けテストです。2分割カラム分けテストです。

1:1:1(均等3分割)に分けたい場合

例えば1:1:1に分けたい場合は、4+4+4=12なので以下のように書きます。

<div class=”col-4″ >3分割カラム分けテストです。3分割カラム分けテストです。</div>
<div class=”col-4″ >3分割カラム分けテストです。3分割カラム分けテストです。</div>
<div class=”col-4″ >3分割カラム分けテストです。3分割カラム分けテストです。</div>
<div class=”cl” ></div>

yajirusi

3分割カラム分けテストです。3分割カラム分けテストです。
3分割カラム分けテストです。3分割カラム分けテストです。
3分割カラム分けテストです。3分割カラム分けテストです。

1:2に分けたい場合

例えば1:2に分けたい場合は、4+8=12なので以下のように書きます。

<div class=”col-4″ >1:2に分けたい場合は、4+8=12なので以下のように書きます</div>
<div class=”col-8″ >1:2に分けたい場合は、4+8=12なので以下のように書きます</div>
<div class=”cl” ></div>

yajirusi

1:2に分けたい場合は、4+8=12なので以下のように書きます
1:2に分けたい場合は、4+8=12なので以下のように書きます

ショートコードを併用して使ってみる

ショートコードを併用して使ってみると表現のバリエーションが広がります。

囲みタイトル

囲みテキスト

囲みタイトル

囲みテキスト

カラー背景テキスト
カラー背景テキスト
カラー背景テキスト
囲みタイトル

囲みテキスト

囲みタイトル

囲みテキスト

 

コメントを残す