Blog

HOME > Web > JQuery > 【jQuery】これは便利！float要素をレンガ状（タイル状）に並べる

【jQuery】これは便利！float要素をレンガ状（タイル状）に並べる

2016/02/25

JQuery

要素の高さを合わせるjQueryはいくつかありますが、
これは、要素の高さを合わせるのではなく、レンガ上に並べる便利なjQueryです。

参考サイト
floatさせた要素をレンガ風に整列してくれるjQuery Masonry

head内

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>  
    <script type="text/javascript" src="js/jquery.masonry.js"></script>  
    <script type="text/javascript">  
        $(function(){  
            $('.wrap').masonry();   
        })  
    </script>

XHTML

<div class="wrap"> 
    <div class="box">****</div>
   
    <div class="box">****</div>
</div>

CSS

.wrap {  
    width: 880px;  
    padding: 10px;  
    background: #EEE;  
    overflow: auto;  
}  
.box {  
    width: 190px;  
    margin: 5px;  
    padding: 10px;  
    float: left;  
    background: #424242;  
    color: #FFF;  
    display: inline;  /* IE6 fix */  
}

classのwrapとboxは実際のコーディングでは変えても大丈夫ですが、
最初は同じようにしたほうが無難かもしれません・・・。

カテゴリー

月間アーカイブ

«前の記事

一覧に戻る

次の記事»

最近の投稿

人気の記事

MORE

ミュージシャンズ・プラザ

神社仏閣ホームーページ制作

ホームページ制作問合せ