jquery砌体定位/重叠

时间:2013-05-26 20:57:08

标签: jquery html css html5

我在砌体的div前面有一个tab div 但是当我运行代码时,它会在选项卡的顶部,我不知道 我可以做些什么来尝试解决这个问题。

    $(document).ready(function ($) {
            $('#tabs').tab();
        });
        $(document).ready(function(){
                $("#posts").masonry({
                    itemSelector: '.post',
                    isAnimated: true
                });
        });

这是我的div

    <div id="posts">
                <div class="post span3">
                    <div><a href="#">
                        <img src="http://reformrevolution.com/wp-content/uploads/rr_20things1.jpg"></img>
                        <h6>The Title of the Picture / Descriptions</h6>
                        </a>
                        <p>---</br>Published by Victor Weng.</br>Date Jan,21,2000</p>
                    </div>
                </div>
                <div class="post span3">
                    <div><a href="#">
                        <img src="http://reformrevolution.com/wp-content/uploads/cities-iv-04.jpg"></img>
                        <h6>The Title of the Picture / Descriptions</h6>
                        </a>
                        <p>---</br>Published by Victor Weng.</br>Date Jan,21,2000</p>
                    </div>
                </div>
                <div class="post span3">
                    <div>
                        <h4> When life gives you a hundred reasons to cry, show life that you have a thousand reasons to smile. </h4>
                        <p>---</br>Published by Victor Weng.</br>Date Jan,21,2000</p>
                    </div>
                </div>
    </div>

这是标签html代码

    <div class="row span12 tabbable">
                <ul class="nav nav-tabs" data-tabs="tabs" id="tabs">
                    <li class="active"><a href="#life" data-toggle="tab">Life</a></li>
                    <li class=""><a href="#sci" data-toggle="tab">Science</a></li>  
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="life">
                        <div class="row">
                            <div class="span4">
                                <h3 class="cPink">Life Article Title</h3>
                                <p>Sed bibendum ultricies quam non laoreet. Suspendisse ut odio vitae eros bibendum aliquam. Phasellus quis sapien leo, vel consequat massa. Duis vel suscipit lorem. Nam eu urna id leo molestie ullamcorper eget id eros. Aenean venenatis mattis lorem, a elementum odio accumsan et. Suspendisse cursus metus feugiat tortor molestie vitae porta sapien ultricies. Fusce malesuada sodales commodo. </p>
                                <a class="pull-right" href="#">Read More --></a>
                            </div>
                            <div class="divider-vertical"></div>
                            <div class="span4">
                                <h3 class="cPink">Life Article Title</h3>
                                <p>Sed bibendum ultricies quam non laoreet. Suspendisse ut odio vitae eros bibendum aliquam. Phasellus quis sapien leo, vel consequat massa. Duis vel suscipit lorem. Nam eu urna id leo molestie ullamcorper eget id eros. Aenean venenatis mattis lorem, a elementum odio accumsan et. Suspendisse cursus metus feugiat tortor molestie vitae porta sapien ultricies. Fusce malesuada sodales commodo. </p>
                                <a class="pull-right" href="#">Read More --></a>
                            </div>
                            <div class="divider-vertical"></div>
                            <div class="span4">
                                <h3 class="cPink">Life Article Title</h3>
                                <p>Sed bibendum ultricies quam non laoreet. Suspendisse ut odio vitae eros bibendum aliquam. Phasellus quis sapien leo, vel consequat massa. Duis vel suscipit lorem. Nam eu urna id leo molestie ullamcorper eget id eros. Aenean venenatis mattis lorem, a elementum odio accumsan et. Suspendisse cursus metus feugiat tortor molestie vitae porta sapien ultricies. Fusce malesuada sodales commodo. </p>
                                <a class="pull-right" href="#">Read More --></a>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane" id="sci">
                        <div class="row">
                            <div class="span4">
                                <h3 class="cPink">Science Article Title</h3>
                                <p>Sed bibendum ultricies quam non laoreet. Suspendisse ut odio vitae eros bibendum aliquam. Phasellus quis sapien leo, vel consequat massa. Duis vel suscipit lorem. Nam eu urna id leo molestie ullamcorper eget id eros. Aenean venenatis mattis lorem, a elementum odio accumsan et. Suspendisse cursus metus feugiat tortor molestie vitae porta sapien ultricies. Fusce malesuada sodales commodo. </p>
                                <a class="pull-right" href="#">Read More --></a>
                            </div>
                            <div class="divider-vertical"></div>
                            <div class="span4">
                                <h3 class="cPink">Science Article Title</h3>
                                <p>Sed bibendum ultricies quam non laoreet. Suspendisse ut odio vitae eros bibendum aliquam. Phasellus quis sapien leo, vel consequat massa. Duis vel suscipit lorem. Nam eu urna id leo molestie ullamcorper eget id eros. Aenean venenatis mattis lorem, a elementum odio accumsan et. Suspendisse cursus metus feugiat tortor molestie vitae porta sapien ultricies. Fusce malesuada sodales commodo. </p>
                                <a class="pull-right" href="#">Read More --></a>
                            </div>
                            <div class="divider-vertical"></div>
                            <div class="span4">
                                <h3 class="cPink">Science Article Title</h3>
                                <p>Sed bibendum ultricies quam non laoreet. Suspendisse ut odio vitae eros bibendum aliquam. Phasellus quis sapien leo, vel consequat massa. Duis vel suscipit lorem. Nam eu urna id leo molestie ullamcorper eget id eros. Aenean venenatis mattis lorem, a elementum odio accumsan et. Suspendisse cursus metus feugiat tortor molestie vitae porta sapien ultricies. Fusce malesuada sodales commodo. </p>
                                <a class="pull-right" href="#">Read More --></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

0 个答案:

没有答案