砌体网格项目即使与“图像”重叠也会重叠。

Question

抱歉，我知道有关于此问题的数千篇帖子。我不能让它工作。我使用的是tumblr主题。我已经做了一个小例子here。

因此有7个.post div是 grid-items ，而.entries div是 grid 。

我已添加指向砌体：<script src="http://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>的链接，以及指向 imagesLoaded 的链接：<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>。

jquery代码通常包含所有必要的选项：

$(function(){
var $container = $('.entries');
$container.imagesLoaded().progress( function() {
$container.masonry({
itemSelector: '.post',
columnWidth: 250,
gutter: 10,
horizontalOrder: true
});
});
$container.infinitescroll({
itemSelector : ".post",
navSelector : "div.pagination",
nextSelector : ".pagination a#next",
loadingImg : "",
loadingText : "<em></em>",
bufferPx : 10000,
extraScrollPx: 12000,
},
// trigger Masonry as a callback
function( newElements ) {
  var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
}
);
});

我不知道什么不起作用，但.post div仍然重叠。有人知道如何解决这个问题吗？非常感谢!!

＆＃13;

＆＃13;

// Tab function
$('.titab.home').click(function(){
    $('.tab').slideUp(1000);
    $('.tab.home').delay(1000).slideDown(1000);
});
$('.titab.contact').click(function(){
    $('.tab').slideUp(1000);
    $('.tab.contact').delay(1000).slideDown(1000);
});
$('.titab.submit').click(function(){
    $('.tab').slideUp(1000);
    $('.tab.submit').delay(1000).slideDown(1000);
});
$('.titab.links').click(function(){
    $('.tab').slideUp(1000);
    $('.tab.links').delay(1000).slideDown(1000);
});

$('.titab').click(function(){
  $('.titab').css('color','#843b62');
  $('.titab').css('box-shadow','none');
  $(this).css('color','#f67e7d');
  $(this).css('box-shadow','inset 0 5px 0 #f67e7d');
});

$(function(){
var $container = $('.entries');
$container.imagesLoaded().progress( function() {
$container.masonry({
itemSelector: '.post',
columnWidth: 250,
gutter: 10,
horizontalOrder: true
});
});
$container.infinitescroll({
itemSelector : ".post",
navSelector : "div.pagination",
nextSelector : ".pagination a#next",
loadingImg : "",
loadingText : "<em></em>",
bufferPx : 10000,
extraScrollPx: 12000,
},
// trigger Masonry as a callback
function( newElements ) {
  var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
}
);
});

＆＃13;

/*edit scrollbar*/

::-webkit-scrollbar-thumb {
    height:auto;
    background-color:#6b6d6d;
}
 
::-webkit-scrollbar {
    height:4px;
    width:3px;
    padding-right:2px;
    background-color:white;
}


#s-m-t-tooltip {
    max-width:300px;
    padding:5px 5px 5px 6px;
    margin:20px 0px 0px 20px;
    background-color:#6b6d6d;
    font-family:arial;
    font-size:9px;
    letter-spacing:2px;
    text-transform:lowercase;
    font-weight:bold;
    color:#fff;
    z-index:99999999;
}

 
body {
    background:#ffd9bf;
    margin:0px;
    color:#f67e7d;
    font-family:arial;
    font-size:10px;
    line-height:100%;
}
   
/*edit links*/

a {
    text-decoration:none;
    outline:none;
    -moz-outline-style:none;
    color:#825d76;
    -moz-transition-duration:0.5s;
    -webkit-transition-duration:0.5s;
    -o-transition-duration:0.5s;
}
 
/*edit link hover*/

a:hover {
    color:#f67e7d;
    outline:none;
    -moz-outline-style:none;
    text-decoration:none;
}
 
img {
    border:none;
}
 
blockquote {
    padding-left:5px;
    border-left:2px solid #000000;
 
}
 
blockquote blockquote {
    padding-left:5px;
    border-left:2px solid;
}
 
h1 {
    font-size:12px;
    text-align:left;
    font-family:'unica one';
    letter-spacing:1px;
    color:#ffd9bf;
}
 
h2 {
    font-size:8px;
    font-family:arial;
    text-align:left;
    letter-spacing:1px;
}


#topbar {
  z-index:10000;
  display: inline-block;
  top: 0;
  left:0;
  width:100%;
  height: 80px;
  position:fixed;
  background: #843b62;
}


#title {
  color:#f67e7d;
  font-family: 'Unica One';
  font-size:18px;
  font-weight:bold;
  line-height: 80px;
  padding-left: 10px;
  text-decoration:underline dashed;
} 

.tabs {
  position:absolute;
  top:0;
  left:50%;
  margin-left:-194.5px;
  width:389px;
  height:100%;
}
.titab{
  cursor: pointer;
  background:#0b032d;
  color:#843b62;
  width:80px;
  height:80px;
  font-size: 17px;
  text-align:center;
  line-height:80px;
  display: inline-block;
  margin-left: 20px;
  -webkit-transition: 0.5s ease;
  -moz-transition: 0.5s ease;
  -ms-transition: 0.5s ease;
  -o-transition: 0.5s ease;
  transition: 0.5s ease;
}
.titab:first-of-type {
  margin-left:0;
}
.tab {
  margin-top:100px;
  display:none;
  width:100%;
}
.tab iframe{
  margin-top:100px;
  width:400px;
}

 

/*----------------------------------TAB 1-----------------------------------*/ 
.entries {
  width:100%;
  height:100%;
  margin:auto;
}
 
.post {
  padding:10px 20px;
  float: left;
  width:250px;
  height:auto;
  margin-bottom:10px;
  margin-left:20px;
  background:#0b032d;
  border-radius:5px;
}
 
.post img, .post iframe{
  max-width: 100%;
  height: auto;
  margin:0;
} 
/* POST INFO */ 

.postinfo {
    margin-top:20px;
    margin-bottom:1px;
    margin-left:-12px;
    padding-bottom:4px;
    width:500px;
    text-align:left;
    font-family:arial;
    text-transform:lowercase;
    font-size:10px;
}
   
/*tags*/ 

.tags {
    width:500px;
    margin-top:4px;
    margin-left:-3px;
    padding:2px;
    font-family:arial;
    letter-spacing:0px;
    font-size:10px;
    text-align:left;
     
    }
   
.postnote {
    width:500px;
    margin-top:40px;
    font-family:arial;
    text-transform:lowercase;
    font-style:normal;
    letter-spacing:0px;
    font-size:10px;
    text-align:left;
  }
   
/*asks*/  

#question {
    font-size:11px;
    font-style:none;
    font-family:arial;
    letter-spacing:0px;
    text-align:left;
    padding-top: 7px;
    padding-bottom: 7px;    
    padding-left:9px;
    background:#fff;
    color:#000 ;
} 

 
/*audio player container*/ 

.playercontainer {
    text-align:left;
    padding:10px;
    padding-left:0px;
    background-color:#fff;
    width:480px;
}

/*artist, song, etc.*/ 

.musicinfo {
    padding-top:7px;
    padding-left:50px;
    color:#000;
    text-align:justify;
}



/*----------------------------------TAB 2/3---------------------------------*/

.asbox{
  padding:20px;
  margin:20px;
  width:500px;
  margin:auto;
  background:#0b032d;
  border-radius:5px;
}
.asbox iframe{
  margin:0;
  width:460px;
  height:340px;
}
.asbox.ask iframe{
  height:200px
}



/*----------------------------------TAB 4-----------------------------------*/

.link {
  width:100px;
  margin:auto;
  margin-bottom:20px;
}
.tilink{
  background:#0b032d;
  padding:10px;
  font-size:15px;
  border:1px solid #888;
  border-radius:5px 5px 0 0;
}
.link a{
  display:block;
  background:#fff;
  padding:5px;
  border:1px solid #aaa;
  border-top:none;
}
 



.pagination{
  display:none;
}

＆＃13;

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>

 
<title>THEMES</title>
<link rel="shortcut icon" href="https://assets.tumblr.com/images/default_avatar/sphere_closed_128.png">
<link rel="alternate" type="application/rss+xml" href="https://themesforyou.tumblr.com/rss">
<link href="https://fonts.googleapis.com/css?family=Unica+One" rel="stylesheet"> 

 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
<script src="http://static.tumblr.com/6hsqxdt/vmwm2rb4g/infinitescrolling.js"></script>
<script src="http://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
 

<div id="topbar">
<div id="title">Themes for you</div>

 <div class="tabs">
  <div class="titab home">Home</div>
  <div class="titab contact">Contact</div>
  <div class="titab submit">Submit</div>
  <div class="titab links">Links</div>
 
 </div>
  
</div> 

<div class="tab home">  
<div class="entries">
  
  <div class="post">

<iframe width="500" height="281" id="youtube_iframe" src="https://www.youtube.com/embed/LKn_3jOKCd8?feature=oembed&amp;enablejsapi=1&amp;origin=https://safe.txmblr.com&amp;wmode=opaque" frameborder="0" allowfullscreen=""></iframe><p>Video example</p>


 
<div class="postinfo"> <a href="https://themesforyou.tumblr.com/post/162913245268/video-example">5:17 pm</a>         </div>
 

<div class="tags">
<a href="https://themesforyou.tumblr.com/tagged/video-post">#video post</a>  <a href="https://themesforyou.tumblr.com/tagged/post-example">#post example</a>  </div>

 
<div class="postnote">

</div>
</div>
<div class="post">
 

<iframe src="https://w.soundcloud.com/player/?url=https%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F4595620&amp;visual=true&amp;liking=false&amp;sharing=false&amp;auto_play=false&amp;show_comments=false&amp;continuous_play=false&amp;origin=tumblr" frameborder="0" allowtransparency="true" class="soundcloud_audio_player" width="500" height="500"></iframe><p>Song example</p>


 
<div class="postinfo"> <a href="https://themesforyou.tumblr.com/post/162913201693/song-example">5:16 pm</a>         <a href="http://soundcloud.com/rodrigovaz/johann-sebastian-bach-pachelbels-cannon-in-d-major">source</a></div>
 

<div class="tags">
<a href="https://themesforyou.tumblr.com/tagged/song-post">#song post</a>  <a href="https://themesforyou.tumblr.com/tagged/post-example">#post example</a>  </div>

 
<div class="postnote">

</div>
</div>
<div class="post">
 


<h1>Chat example</h1><b>Someone:</b> Hello!<br><b>Somebody:</b> How are you?<br><b>Someone:</b> Good. This is an example of a chat between two people<br>



 
<div class="postinfo"> <a href="https://themesforyou.tumblr.com/post/162913135663/chat-example">5:14 pm</a>         </div>
 

<div class="tags">
<a href="https://themesforyou.tumblr.com/tagged/chat-post">#chat post</a>  <a href="https://themesforyou.tumblr.com/tagged/post-example">#post example</a>  </div>

 
<div class="postnote">

</div>
</div>
<div class="post">
 

 
<h1><a href="http://t.umblr.com/redirect?z=http%3A%2F%2Ffr.lipsum.com%2F&amp;t=NzM2ZDBmOWE1MjkxNjE3ZWE4MTVjZWY0YjhkMmYwYzA5MzFlMTcxOSxXMUV1V2RJNg%3D%3D&amp;b=t%3Aug0c1iN6GrzkGIMg-nJ8Ww&amp;p=https%3A%2F%2Fthemesforyou.tumblr.com%2Fpost%2F162913065653%2Florem-ipsum-all-the-facts-lipsum-generator&amp;m=1">Lorem Ipsum - All the facts - Lipsum generator</a></h1><p>Link example</p>
 




 
<div class="postinfo"> <a href="https://themesforyou.tumblr.com/post/162913065653/lorem-ipsum-all-the-facts-lipsum-generator">5:12 pm</a>         </div>
 

<div class="tags">
<a href="https://themesforyou.tumblr.com/tagged/link-post">#link post</a>  <a href="https://themesforyou.tumblr.com/tagged/post-example">#post example</a>  </div>

 
<div class="postnote">

</div>
</div>
<div class="post">
 


<big><b>"This is what a quote looks like"</b></big><p></p>— Source

 

<div class="postinfo"> <a href="https://themesforyou.tumblr.com/post/162913036513/this-is-what-a-quote-looks-like">5:11 pm</a>         </div>
 

<div class="tags">
<a href="https://themesforyou.tumblr.com/tagged/quote-post">#quote post</a>  <a href="https://themesforyou.tumblr.com/tagged/post-example">#post example</a>  </div>

 
<div class="postnote">

</div>
</div>
<div class="post">
 
  
 <a href="https://themesforyou.tumblr.com/image/162913004603"><img src="https://68.media.tumblr.com/cf975a46b1a6b0183ea6e5017f56271c/tumblr_oszxhlV6bZ1wuevxyo1_500.png"></a><p>Photo example</p>
 

 
<div class="postinfo"> <a href="https://themesforyou.tumblr.com/post/162913004603/photo-example">5:10 pm</a>         </div>
 

<div class="tags">
<a href="https://themesforyou.tumblr.com/tagged/photo-post">#photo post</a>  <a href="https://themesforyou.tumblr.com/tagged/post-example">#post example</a>  </div>

 
<div class="postnote">

</div>
</div>
<div class="post">
 
<h1><big><big>Text example</big></big></h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras efficitur eget massa at mattis. Nulla ullamcorper massa ante, et bibendum sem ultricies et. In hac habitasse platea dictumst. Suspendisse tempus orci ex, fermentum accumsan velit pulvinar a. Pellentesque vehicula, felis non fermentum suscipit, sem velit scelerisque urna, eu placerat velit lectus ut metus. Duis molestie scelerisque convallis. In ornare libero ipsum, eget rhoncus velit viverra a. Maecenas facilisis tellus metus, ac consequat tellus tristique et. Aenean eu neque eu erat euismod euismod. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis in maximus ipsum.</p><p>Nullam ac dui et augue rhoncus condimentum facilisis in orci. Aenean sit amet metus magna. Mauris eu pellentesque velit. Nullam dui risus, varius nec sem pellentesque, suscipit consequat mauris. Vivamus volutpat, mi in molestie blandit, ligula odio efficitur libero, ac porta leo tellus eu felis. Mauris auctor orci sagittis libero semper tristique. Praesent hendrerit purus ex, eget fermentum nulla maximus nec. Fusce nisi metus, scelerisque et mi vitae, posuere condimentum odio. Aenean maximus erat non commodo aliquam. Aliquam ac tincidunt metus. Integer tincidunt id sapien lobortis imperdiet. Maecenas enim sem, vehicula sit amet feugiat sit amet, ornare vitae ex. Nam vulputate volutpat quam, a dapibus justo cursus vel. Donec ac gravida nulla. In ultrices erat et dictum tristique.</p>


<div class="postinfo"> <a href="https://themesforyou.tumblr.com/post/162912904188/text-example">5:07 pm</a>         </div>
 

<div class="tags">
<a href="https://themesforyou.tumblr.com/tagged/text-post">#text post</a>  <a href="https://themesforyou.tumblr.com/tagged/example-post">#example post</a>  </div>

 
<div class="postnote">

</div>
</div>

 

 
 
</div><!-- end entries-->
  
  </div><!--end tab 1-->

<div class="tab contact">
  <div class="asbox ask"><h1>Want a theme?</h1>
<iframe class="inbox" frameborder="0" border="0" scrolling="no" width="350" height="260" allowtransparency="true" src="http://www.tumblr.com/ask_form/themesforyou.tumblr.com"></iframe>
  </div>
  </div>
  
<div class="tab submit">
  <div class="asbox"><h1>Have a theme?</h1>
<iframe class="inbox" frameborder="0" border="0" scrolling="no" width="350" height="260" allowtransparency="true" src="http://www.tumblr.com/submit_form/themesforyou.tumblr.com"></iframe>
  </div>
</div>

<div class="tab links">
  <div class="link">
    <div class="tilink">Title</div>
    <a href="/tagged/">Link 1</a>
    <a href="/tagged/">Link 2</a>
    <a href="/tagged/">Link 3</a>
    <a href="/tagged/">Link 4</a>
  </div>
    <div class="link">
    <div class="tilink">Title</div>
    <a href="/tagged/">Link 1</a>
    <a href="/tagged/">Link 2</a>
    <a href="/tagged/">Link 3</a>
    <a href="/tagged/">Link 4</a>
  </div>
    <div class="link">
    <div class="tilink">Title</div>
    <a href="/tagged/">Link 1</a>
    <a href="/tagged/">Link 2</a>
    <a href="/tagged/">Link 3</a>
    <a href="/tagged/">Link 4</a>
  </div>
</div>

  
<div class="pagination">
{block:Pagination}{block:PreviousPage}<a href="{PreviousPage}">previous</a> &middot;{/block:PreviousPage} {block:NextPage}<a href="{NextPage}" id="next">next</a>{/block:NextPage}{/block:Pagination}
</div>
</body></html>

＆＃13;

＆＃13;

＆＃13;

Answer 1

通过添加：$(document).ready(function(evt) { $('.tab.home').show() })

来解决此问题

当标签没有显示时，正在加载砖石。

以下是更新后的代码：

＆＃13;

＆＃13;

$(document).ready(function(evt) {
$('.tab.home').slideDown(1000)
});
// Tab function
$('.titab.home').click(function(){
    $('.tab').slideUp(1000);
    $('.tab.home').delay(1000).slideDown(1000);
});
$('.titab.contact').click(function(){
    $('.tab').slideUp(1000);
    $('.tab.contact').delay(1000).slideDown(1000);
});
$('.titab.submit').click(function(){
    $('.tab').slideUp(1000);
    $('.tab.submit').delay(1000).slideDown(1000);
});
$('.titab.links').click(function(){
    $('.tab').slideUp(1000);
    $('.tab.links').delay(1000).slideDown(1000);
});

$('.titab').click(function(){
  $('.titab').removeClass('active');
  $(this).addClass('active');
});


$(function(){
var $container = $('.entries');
$container.imagesLoaded().progress( function() {
$container.masonry({
itemSelector: '.post',
columnWidth: 170,
gutter: 10,
horizontalOrder: true
});
});
$container.infinitescroll({
itemSelector : ".post",
navSelector : "div.pagination",
nextSelector : ".pagination a#next",
loadingImg : "",
loadingText : "<em></em>",
bufferPx : 10000,
extraScrollPx: 12000,
},
// trigger Masonry as a callback
function( newElements ) {
  var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
}
);
});

＆＃13;

/*edit scrollbar*/

::-webkit-scrollbar-thumb {
    height:auto;
    background-color:#6b6d6d;
}
 
::-webkit-scrollbar {
    height:4px;
    width:3px;
    padding-right:2px;
    background-color:white;
}


#s-m-t-tooltip {
    max-width:300px;
    padding:5px 5px 5px 6px;
    margin:20px 0px 0px 20px;
    background-color:#6b6d6d;
    font-family:arial;
    font-size:9px;
    letter-spacing:2px;
    text-transform:lowercase;
    font-weight:bold;
    color:#fff;
    z-index:99999999;
}

 
body {
    background:#ffd9bf;
    margin:0px;
    color:#f67e7d;
    font-family:arial;
    font-size:10px;
    line-height:100%;
}
   
/*edit links*/

a {
    text-decoration:none;
    outline:none;
    -moz-outline-style:none;
    color:#825d76;
    -moz-transition-duration:0.5s;
    -webkit-transition-duration:0.5s;
    -o-transition-duration:0.5s;
}
 
/*edit link hover*/

a:hover {
    color:#f67e7d;
    outline:none;
    -moz-outline-style:none;
    text-decoration:none;
}
 
img {
    border:none;
}
 
blockquote {
    padding-left:5px;
    border-left:2px solid #000000;
 
}
 
blockquote blockquote {
    padding-left:5px;
    border-left:2px solid;
}
 
h1 {
    font-size:12px;
    text-align:left;
    font-family:'unica one';
    letter-spacing:1px;
    color:#ffd9bf;
}
 
h2 {
    font-size:8px;
    font-family:arial;
    text-align:left;
    letter-spacing:1px;
}


#topbar {
  z-index:10000;
  display: inline-block;
  top: 0;
  left:0;
  width:100%;
  height: 80px;
  position:fixed;
  background: #843b62;
}


#title {
  color:#f67e7d;
  font-family: 'Unica One';
  font-size:18px;
  font-weight:bold;
  line-height: 80px;
  padding-left: 10px;
  text-decoration:underline dashed;
} 

.tabs {
  position:absolute;
  top:0;
  left:50%;
  margin-left:-194.5px;
  width:389px;
  height:100%;
}
.titab{
  cursor: pointer;
  background:#0b032d;
  color:#843b62;
  box-shadow:none;
  width:80px;
  height:80px;
  font-size: 17px;
  text-align:center;
  line-height:80px;
  display: inline-block;
  margin-left: 20px;
  -webkit-transition: 0.5s ease;
  -moz-transition: 0.5s ease;
  -ms-transition: 0.5s ease;
  -o-transition: 0.5s ease;
  transition: 0.5s ease;
}
.titab:first-of-type {
  margin-left:0;
}
.tab {
  margin-top:100px;
  display:none;
  width:100%;
}
.tab iframe{
  margin-top:100px;
  width:400px;
}
.titab.active{
  color:#f67e7d;
  box-shadow:inset 0 5px 0 #f67e7d;
}

 

/*----------------------------------TAB 1-----------------------------------*/ 
.entries {
  width:100%;
  height:100%;
  margin:auto;
}
 
.post {
  padding:10px 20px;
  float: left;
  width:250px;
  height:auto;
  margin-bottom:10px;
  margin-left:20px;
  background:#0b032d;
  border-radius:5px;
}
 
.post img, .post iframe{
  max-width: 100%;
  height: auto;
  margin:0;
} 
/* POST INFO */ 

.postinfo {
    margin-top:20px;
    margin-bottom:1px;
    margin-left:-12px;
    padding-bottom:4px;
    width:500px;
    text-align:left;
    font-family:arial;
    text-transform:lowercase;
    font-size:10px;
}
   
/*tags*/ 

.tags {
    width:500px;
    margin-top:4px;
    margin-left:-3px;
    padding:2px;
    font-family:arial;
    letter-spacing:0px;
    font-size:10px;
    text-align:left;
     
    }
   
.postnote {
    width:500px;
    margin-top:40px;
    font-family:arial;
    text-transform:lowercase;
    font-style:normal;
    letter-spacing:0px;
    font-size:10px;
    text-align:left;
  }
   
/*asks*/  

#question {
    font-size:11px;
    font-style:none;
    font-family:arial;
    letter-spacing:0px;
    text-align:left;
    padding-top: 7px;
    padding-bottom: 7px;    
    padding-left:9px;
    background:#fff;
    color:#000 ;
} 

 
/*audio player container*/ 

.playercontainer {
    text-align:left;
    padding:10px;
    padding-left:0px;
    background-color:#fff;
    width:480px;
}

/*artist, song, etc.*/ 

.musicinfo {
    padding-top:7px;
    padding-left:50px;
    color:#000;
    text-align:justify;
}



/*----------------------------------TAB 2/3---------------------------------*/

.asbox{
  padding:20px;
  margin:20px;
  width:500px;
  margin:auto;
  background:#0b032d;
  border-radius:5px;
}
.asbox iframe{
  margin:0;
  width:460px;
  height:340px;
}
.asbox.ask iframe{
  height:200px
}



/*----------------------------------TAB 4-----------------------------------*/

.link {
  width:100px;
  margin:auto;
  margin-bottom:20px;
}
.tilink{
  background:#0b032d;
  padding:10px;
  font-size:15px;
  border:1px solid #888;
  border-radius:5px 5px 0 0;
}
.link a{
  display:block;
  background:#fff;
  padding:5px;
  border:1px solid #aaa;
  border-top:none;
}
.link a:hover{
  padding-left:10px;
}
 



.pagination{
  display:none;
}

＆＃13;

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>

 
<title>THEMES</title>
<link rel="shortcut icon" href="https://assets.tumblr.com/images/default_avatar/sphere_closed_128.png">
<link rel="alternate" type="application/rss+xml" href="https://themesforyou.tumblr.com/rss">
<link href="https://fonts.googleapis.com/css?family=Unica+One" rel="stylesheet"> 

 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
<script src="http://static.tumblr.com/6hsqxdt/vmwm2rb4g/infinitescrolling.js"></script>
<script src="http://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
 

<div id="topbar">
<div id="title">Themes for you</div>

 <div class="tabs">
  <div class="titab home active">Home</div>
  <div class="titab contact">Contact</div>
  <div class="titab submit">Submit</div>
  <div class="titab links">Links</div>
 
 </div>
  
</div> 

<div class="tab home">  
<div class="entries">
  
  <div class="post">

<iframe width="500" height="281" id="youtube_iframe" src="https://www.youtube.com/embed/LKn_3jOKCd8?feature=oembed&amp;enablejsapi=1&amp;origin=https://safe.txmblr.com&amp;wmode=opaque" frameborder="0" allowfullscreen=""></iframe><p>Video example</p>


 
<div class="postinfo"> <a href="https://themesforyou.tumblr.com/post/162913245268/video-example">5:17 pm</a>         </div>
 

<div class="tags">
<a href="https://themesforyou.tumblr.com/tagged/video-post">#video post</a>  <a href="https://themesforyou.tumblr.com/tagged/post-example">#post example</a>  </div>

 
<div class="postnote">

</div>
</div>
<div class="post">
 

<iframe src="https://w.soundcloud.com/player/?url=https%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F4595620&amp;visual=true&amp;liking=false&amp;sharing=false&amp;auto_play=false&amp;show_comments=false&amp;continuous_play=false&amp;origin=tumblr" frameborder="0" allowtransparency="true" class="soundcloud_audio_player" width="500" height="500"></iframe><p>Song example</p>


 
<div class="postinfo"> <a href="https://themesforyou.tumblr.com/post/162913201693/song-example">5:16 pm</a>         <a href="http://soundcloud.com/rodrigovaz/johann-sebastian-bach-pachelbels-cannon-in-d-major">source</a></div>
 

<div class="tags">
<a href="https://themesforyou.tumblr.com/tagged/song-post">#song post</a>  <a href="https://themesforyou.tumblr.com/tagged/post-example">#post example</a>  </div>

 
<div class="postnote">

</div>
</div>
<div class="post">
 


<h1>Chat example</h1><b>Someone:</b> Hello!<br><b>Somebody:</b> How are you?<br><b>Someone:</b> Good. This is an example of a chat between two people<br>



 
<div class="postinfo"> <a href="https://themesforyou.tumblr.com/post/162913135663/chat-example">5:14 pm</a>         </div>
 

<div class="tags">
<a href="https://themesforyou.tumblr.com/tagged/chat-post">#chat post</a>  <a href="https://themesforyou.tumblr.com/tagged/post-example">#post example</a>  </div>

 
<div class="postnote">

</div>
</div>
<div class="post">
 

 
<h1><a href="http://t.umblr.com/redirect?z=http%3A%2F%2Ffr.lipsum.com%2F&amp;t=NzM2ZDBmOWE1MjkxNjE3ZWE4MTVjZWY0YjhkMmYwYzA5MzFlMTcxOSxXMUV1V2RJNg%3D%3D&amp;b=t%3Aug0c1iN6GrzkGIMg-nJ8Ww&amp;p=https%3A%2F%2Fthemesforyou.tumblr.com%2Fpost%2F162913065653%2Florem-ipsum-all-the-facts-lipsum-generator&amp;m=1">Lorem Ipsum - All the facts - Lipsum generator</a></h1><p>Link example</p>
 




 
<div class="postinfo"> <a href="https://themesforyou.tumblr.com/post/162913065653/lorem-ipsum-all-the-facts-lipsum-generator">5:12 pm</a>         </div>
 

<div class="tags">
<a href="https://themesforyou.tumblr.com/tagged/link-post">#link post</a>  <a href="https://themesforyou.tumblr.com/tagged/post-example">#post example</a>  </div>

 
<div class="postnote">

</div>
</div>
<div class="post">
 


<big><b>"This is what a quote looks like"</b></big><p></p>— Source

 

<div class="postinfo"> <a href="https://themesforyou.tumblr.com/post/162913036513/this-is-what-a-quote-looks-like">5:11 pm</a>         </div>
 

<div class="tags">
<a href="https://themesforyou.tumblr.com/tagged/quote-post">#quote post</a>  <a href="https://themesforyou.tumblr.com/tagged/post-example">#post example</a>  </div>

 
<div class="postnote">

</div>
</div>
<div class="post">
 
  
 <a href="https://themesforyou.tumblr.com/image/162913004603"><img src="https://68.media.tumblr.com/cf975a46b1a6b0183ea6e5017f56271c/tumblr_oszxhlV6bZ1wuevxyo1_500.png"></a><p>Photo example</p>
 

 
<div class="postinfo"> <a href="https://themesforyou.tumblr.com/post/162913004603/photo-example">5:10 pm</a>         </div>
 

<div class="tags">
<a href="https://themesforyou.tumblr.com/tagged/photo-post">#photo post</a>  <a href="https://themesforyou.tumblr.com/tagged/post-example">#post example</a>  </div>

 
<div class="postnote">

</div>
</div>
<div class="post">
 
<h1><big><big>Text example</big></big></h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras efficitur eget massa at mattis. Nulla ullamcorper massa ante, et bibendum sem ultricies et. In hac habitasse platea dictumst. Suspendisse tempus orci ex, fermentum accumsan velit pulvinar a. Pellentesque vehicula, felis non fermentum suscipit, sem velit scelerisque urna, eu placerat velit lectus ut metus. Duis molestie scelerisque convallis. In ornare libero ipsum, eget rhoncus velit viverra a. Maecenas facilisis tellus metus, ac consequat tellus tristique et. Aenean eu neque eu erat euismod euismod. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis in maximus ipsum.</p><p>Nullam ac dui et augue rhoncus condimentum facilisis in orci. Aenean sit amet metus magna. Mauris eu pellentesque velit. Nullam dui risus, varius nec sem pellentesque, suscipit consequat mauris. Vivamus volutpat, mi in molestie blandit, ligula odio efficitur libero, ac porta leo tellus eu felis. Mauris auctor orci sagittis libero semper tristique. Praesent hendrerit purus ex, eget fermentum nulla maximus nec. Fusce nisi metus, scelerisque et mi vitae, posuere condimentum odio. Aenean maximus erat non commodo aliquam. Aliquam ac tincidunt metus. Integer tincidunt id sapien lobortis imperdiet. Maecenas enim sem, vehicula sit amet feugiat sit amet, ornare vitae ex. Nam vulputate volutpat quam, a dapibus justo cursus vel. Donec ac gravida nulla. In ultrices erat et dictum tristique.</p>


<div class="postinfo"> <a href="https://themesforyou.tumblr.com/post/162912904188/text-example">5:07 pm</a>         </div>
 

<div class="tags">
<a href="https://themesforyou.tumblr.com/tagged/text-post">#text post</a>  <a href="https://themesforyou.tumblr.com/tagged/example-post">#example post</a>  </div>

 
<div class="postnote">

</div>
</div>

 

 
 
</div><!-- end entries-->
  
  </div><!--end tab 1-->

<div class="tab contact">
  <div class="asbox ask"><h1>Want a theme?</h1>
<iframe class="inbox" frameborder="0" border="0" scrolling="no" width="350" height="260" allowtransparency="true" src="http://www.tumblr.com/ask_form/themesforyou.tumblr.com"></iframe>
  </div>
  </div>
  
<div class="tab submit">
  <div class="asbox"><h1>Have a theme?</h1>
<iframe class="inbox" frameborder="0" border="0" scrolling="no" width="350" height="260" allowtransparency="true" src="http://www.tumblr.com/submit_form/themesforyou.tumblr.com"></iframe>
  </div>
</div>

<div class="tab links">
  <div class="link">
    <div class="tilink">Title</div>
    <a href="/tagged/">Link 1</a>
    <a href="/tagged/">Link 2</a>
    <a href="/tagged/">Link 3</a>
    <a href="/tagged/">Link 4</a>
  </div>
    <div class="link">
    <div class="tilink">Title</div>
    <a href="/tagged/">Link 1</a>
    <a href="/tagged/">Link 2</a>
    <a href="/tagged/">Link 3</a>
    <a href="/tagged/">Link 4</a>
  </div>
    <div class="link">
    <div class="tilink">Title</div>
    <a href="/tagged/">Link 1</a>
    <a href="/tagged/">Link 2</a>
    <a href="/tagged/">Link 3</a>
    <a href="/tagged/">Link 4</a>
  </div>
</div>

  
<div class="pagination">
{block:Pagination}{block:PreviousPage}<a href="{PreviousPage}">previous</a> &middot;{/block:PreviousPage} {block:NextPage}<a href="{NextPage}" id="next">next</a>{/block:NextPage}{/block:Pagination}
</div>
</body></html>

＆＃13;

＆＃13;

＆＃13;