• このエントリーをはてなブックマークに追加
CSSでfloatを用いて左寄せの段組をする方法
閉じる
閉じる

新しい記事を投稿しました。シェアして読者に伝えましょう

×

CSSでfloatを用いて左寄せの段組をする方法

2013-02-27 16:48

    <div class="tokyo">東京</div>
    <div class="kanagawa">神奈川</div>
    <div class="osaka">大阪</div>
    <div class="nagoya">名古屋</div>
    <div class="saitama">埼玉</div>
    <div class="nagano">長野</div>
    <div class="fukuoka">福岡</div>

    div.tokyo{
    background-color:lightpink;
    border: 4px solid #0000FF;
    width:600px;
    }

    div.kanagawa{
    background-color:lightskyblue;
    border: 4px solid #FF0000;
    width:300px;
    float:left;
    }


    div.osaka{
    background-color:green;
    border: 4px solid #000000;
    width:300px;
    float:left;
    }

    div.nagoya{
    background-color:aqua;
    border: 4px solid #FF6699;
    width:200px;
    clear:both;
    float:left;
    }

    div.saitama{
    background-color:orchid;
    border: 4px solid #333333;
    width:200px;
    float:left;
    }

    div.nagano{
    background-color:burlywood;
    border: 4px solid #FF6699;
    width:200px;
    float:left;
    }

    div.fukuoka{
    background-color:lime;
    border: 4px solid #000000;
    width:300px;
    clear:both;

    }

    名古屋で
    clear:both;
    float:left;
    のように連続して指定することで、次の段に進めている。

    サンプルソース
    https://tokyo-webs.jp/sample_source/130227a/

    東京ウェブ制作
    チャンネル会員ならもっと楽しめる!
    • 会員限定の新着記事が読み放題!※1
    • 動画や生放送などの追加コンテンツが見放題!※2
      • ※1、入会月以降の記事が対象になります。
      • ※2、チャンネルによって、見放題になるコンテンツは異なります。
    ブログイメージ
    東京ウェブ制作ブロマガ
    更新頻度: 不定期
    最終更新日:
    チャンネル月額: ¥550 (税込)

    チャンネルに入会して購読

    コメントを書く
    コメントをするにはログインして下さい。