石積みの 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>