Next Home 
No,237 comment 0
floatに代わってページをレイアウトするのに「flexbox」を使うととても短いコードでできると知りました。スタイルシートは
.container {
display: flex;
}
.left {
width: 300px;
}
.contents {
flex: 1;
}

だけだそうです。ほんとにびっくりです。詳しくは

floatより辛くない「flexbox」でざっくりレイアウト



高さの違うアイテムを隙間なく並べてくれる
jQuery プラグイン Masonry
を使用時、2カラムにするとMasonryの部分がcontainerの幅になって右側にはみ出してしまいます。
そこで「jQuery プラグイン Masonry のイニシャライズ(初期設定)」において
#containerを2カラムの右側のdivクラス名にしてisFitWidth: trueをisFitWidth:falseに変更すると右側の中に納まってくれました。


更にPC表示サイズ960pxが切れるときブルタウンメニューに設定しました。
cssにおいて960px以下ではleftを display: none; としてブルタウンメニューのオープンボタンを出しました。
パソコンのかたはウインドウサイズを狭めてみてください。


詳しくはDEMOのソースをご覧ください。
2018年11月28日11時32分47秒/カスタマイズ /コメント:0 /トラックバック:0/▲ページトップへ戻る

コメント


コメント index
    絵文字

    非公開コメント

    トラックバック:
    トラックバック URL
    →http://dreamy.blog2.fc2.com/tb.php/237-088b5014

    Next Home 


    どりーみー

    カテゴリー

    recent comment

    最新の記事

    月別アーカイブ

    recent trackback

    ブログ内検索

    RSSフィード

    *最新記事のRSS
    *最新コメントのRSS
    *最新トラックバックのRSS

    TB_People

    カレンダー

    07 | 2019/08 | 09
    - - - - 1 2 3
    4 5 6 7 8 9 10
    11 12 13 14 15 16 17
    18 19 20 21 22 23 24
    25 26 27 28 29 30 31

    ブロとも一覧

    ブロとも申請フォーム

    この人とブロともになる

    リンク

     

    カテゴリー

    recent comment

    最新の記事

    月別アーカイブ

    recent trackback

    ブログ内検索

    RSSフィード

    *最新記事のRSS
    *最新コメントのRSS
    *最新トラックバックのRSS

    TB_People

    カレンダー

    07 | 2019/08 | 09
    - - - - 1 2 3
    4 5 6 7 8 9 10
    11 12 13 14 15 16 17
    18 19 20 21 22 23 24
    25 26 27 28 29 30 31

    ブロとも一覧

    ブロとも申請フォーム

    この人とブロともになる

    リンク