0

我在砌体 div 之前的顶部有一个选项卡 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>
4

0 回答 0