自定义tumblr主题 - 并排显示的帖子

时间：2015-04-18 18:41:51

标签： html css

我正在创建一个自定义的Tumblr主题（它在大多数情况下都很顺利，但我以前从未这样做过，而且我遇到了一个我无法解决的问题）。您可能知道，帖子应该在另一个上面显示，因此您可以向下滚动并查看下一个。我的问题是它们并排显示（以奇怪的对角线方式）。这些帖子没有浮动，所以我不知道为什么他们会这样做。

我有以下代码：

<html>
    <head>
        <title>{Title}</title>
        <link rel="shortcut icon" href="{Favicon}">
        <link rel="alternate" type="application/rss+xml" href="{RSS}">
        {block:Description}
            <meta name="description" content="{MetaDescription}" />
        {/block:Description}
        <link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
        <link href='http://fonts.googleapis.com/css?family=La+Belle+Aurore' rel='stylesheet' type='text/css'>
  <link href='http://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
  <link href='http://fonts.googleapis.com/css?family=Playfair+Display' rel='stylesheet' type='text/css'>
  <script>
      $(document).ready(function(){

  document.getElementById('no-drag').ondragstart = function() { return false; };

  $('div#page').mouseenter(function(){
    $(this).css('background', '#AE95BC');
  });
  $('div#page').mouseleave(function(){
    $(this).css('background', '#372A52');
  });
      });
  </script>
        <style>
        body {
  margin:60px;
}
            .sidebar {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width:230px;
}
.header-image {
   width:230px;
}

li img {
    max-width:400px;
}

.title {
  height:40px;
  width:230px;
  background:#372A52;
  color:#ffffff;
  font-family: 'La Belle Aurore', cursive;
  text-align:center;
  padding-top:14px;
}

#description {
  padding-top:11px;
  height:25px;
  width:230px;
  background:#372A52;
  color:#ffffff;
  font-family: 'Poiret One', cursive;
  text-align:center;
  font-size:10px;
  letter-spacing:2px;
}

#page {
  float:left;
  height:33px;
  width:33px;
  background:#372A52;
  color:#ffffff;
  font-family: 'Poiret One', cursive;
  text-align:center;
  font-size:11px;
  line-height: 33px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  cursor:pointer;
}

.s {
  float:left;
  color:transparent;
}

#pageturn {
  font-family: 'Playfair Display', serif;
  font-size:12px;
  text-decoration:none;
  color:#372A52;
}

#pageturn:hover {
  color:#836097;
}

.next {
  position:relative;
  left:147px;
}

ol#posts {
  color:#372A52;
  font-family: 'Playfair Display', serif;
  font-size:12px;
  position:absolute;
  top:-17px;
  left:395px;
  letter-spacing:1px;
  line-height:23px;
  padding:25px;
  width:400px;
  background:#FFFFFF;
  margin:60px;
}

.post-background {
  background:#AE9DB8;
  opacity:0.2;
  position:fixed;
  top:0px;
  left:350px;
  height:100%;
  width:541px;
  z-index:-100;
}

.main {
    height:100%;
    position:absolute;
    top:0px;
    left:-60px;
    padding:0px;
    margin:0px;
}

.theme-credit {
  font-family: 'Playfair Display', serif;
  font-size:10px;
  color:#372A52;
  opacity:0.6;
  position:fixed;
  right:35px;
  bottom:22px;
  z-index:-50;
}  

/*style this more*/div.caption {
    width:420px;
}
</style>
    </head>
    <body>

<div class="sidebar" id="no-drag">
<div class="title">
    {Title}
  </div><br/>
  {block:ShowAvatar}
  <img border="0" src="http://4.bp.blogspot.com/-TrC0-ZZuY7k/VTCOH9ZPELI/AAAAAAAAB44/5sG0F5-zETk/s1600/tumblr_n32n15ypTm1r907hpo2_500.gif" class="header-image"/><br/><br/>
  {/block:ShowAvatar}
    {block:Description}
    <div id="description">{Description}</div><br/><br/>
        {/block:Description}
        {block:ShowHeaderImage}
        <a href="http://cosplaysewingcrafts.tumblr.com/"><div id="page" title="index"/>1</div></a>
  <label class="s">1234</label>
      <a href="/ask"><div id="page" title="ask"/>2</div></a>
  <label class="s">1234</label>
    <a href="/tagged/reference"><div id="page" title="reference"/>3</div></a>
<label class="s">1234</label>
    <a href="http://cornflowershade.tumblr.com/"><div id="page" title="main blog"/>4</div></a>
        {/block:ShowHeaderImage}
        <br/><br/><br/><br/><br/>
            {block:PreviousPage}
            <a href="{PreviousPage}" id="pageturn">« BACK</a>
            {/block:PreviousPage}{block:NextPage}
            <label class="next"><a href="{NextPage}" id="pageturn">NEXT »</label></a>{/block:NextPage}

  </div>

        <div class="main">
        <div class="post-background">
  </div>{block:Posts}

        <ol id="posts">
        {block:Text}
                    <li class="post text" id="post">
                        {block:Title}
                            <h3><a href="{Permalink}">{Title}</a></h3>
                        {/block:Title}{Body}
                        <!--START NOTE SECTION (post info)-->
                        {block:RebloggedFrom}
                        reblogged from 
                        <a href="{ReblogParentURL}">{ReblogParentName}</a>,
                        {/block:RebloggedFrom} 
                        originally posted by 
                        <a href="{ReblogRootURL}">{ReblogRootName}</a>

                        {block:NotReblog}
                        {/block:NotReblog}

                        {block:Date}{TimeAgo}{/block:Date}
                        {block:NoteCount}
                        <a href="{SourceURL}">{NoteCountWithLabel}</a>
                        {/block:NoteCount}

                        {block:HasTags}
                        {block:Tags}
                        <a href="{TagURL}">{Tag}</a>.&nbsp;
                        {/block:Tags}
                        {/block:HasTags}

                        {block:PostNotes}
                        {PostNotes-16}
                        {/block:PostNotes}
                    </li>
                {/block:Text}{block:Photo}
                    <li class="post photo" id="post">
                        <img src="{PhotoURL-400}" alt="{PhotoAlt}"/>

                        {block:Caption}
                            <div class="caption">{Caption}</div>
                        {/block:Caption}
                        originally posted by <a href"{SourceURL}">{SourceTitle}</a>
                        {block:Date}{TimeAgo}{/block:Date}
                        {block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}
                        {block:PostNotes}{PostNotes-16}{/block:PostNotes}
                        {block:HasTags}{block:Tags} {/block:Tags}<a href="{TagURL}">{Tag}</a>{/block:HasTags}

                        </li>
                {/block:Photo}{block:Panorama}
                    <li class="post panorama" id="post">
                        {LinkOpenTag}
                            <img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>
                        {LinkCloseTag}{block:Caption}
                            <div class="caption">{Caption}</div>
                        {/block:Caption}
                        originally posted by <a href"{SourceURL}">{SourceTitle}</a>
                        {block:Date}{TimeAgo}{/block:Date}
                        {block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}
                        {block:PostNotes}{PostNotes-16}{/block:PostNotes}
                        {block:HasTags}{block:Tags} {/block:Tags}<a href="{TagURL}">{Tag}</a>{/block:HasTags}
                    </li>
                {/block:Panorama}{block:Photoset}
                    <li class="post photoset" id="post">
                        {Photoset-400}{block:Caption}
                            <div class="caption">{Caption}</div>
                        {/block:Caption}
                        originally posted by <a href"{SourceURL}">{SourceTitle}</a>
                        {block:Date}{TimeAgo}{/block:Date}
                        {block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}
                        {block:PostNotes}{PostNotes-16}{/block:PostNotes}
                        {block:HasTags}{block:Tags} {/block:Tags}<a href="{TagURL}">{Tag}</a>{/block:HasTags}
                    </li>
                {/block:Photoset}{block:Quote}
                    <li class="post quote" id="post">
                        "{Quote}"

                        {block:Source}
                            <div class="source">{Source}</div>
                        {/block:Source}
                        originally posted by <a href"{SourceURL}">{SourceTitle}</a>
                        {block:Date}{TimeAgo}{/block:Date}
                        {block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}
                        {block:PostNotes}{PostNotes-16}{/block:PostNotes}
                        {block:HasTags}{block:Tags} {/block:Tags}<a href="{TagURL}">{Tag}</a>{/block:HasTags}
                    </li>
                {/block:Quote}{block:Link}
                    <li class="post link" id="post">
                        <a href="{URL}" class="link" {Target}>{Name}</a>

                        {block:Description}
                            <div class="description">{Description}</div>
                        {/block:Description}
                        originally posted by <a href"{SourceURL}">{SourceTitle}</a>
                        {block:Date}{TimeAgo}{/block:Date}
                        {block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}
                        {block:PostNotes}{PostNotes-16}{/block:PostNotes}
                        {block:HasTags}{block:Tags} {/block:Tags}<a href="{TagURL}">{Tag}</a>{/block:HasTags}
                    </li>
                {/block:Link}{block:Chat}
                    <li class="post chat" id="post">
                        {block:Title}
                            <h3><a href="{Permalink}">{Title}</a></h3>
                        {/block:Title}

                        <ul class="chat" id="post">
                            {block:Lines}
                                <li class="{Alt} user_{UserNumber}">
                                    {block:Label}
                                        <span class="label">{Label}</span>
                                    {/block:Label}{Line}
                                </li>
                            {/block:Lines}
                        </ul>
                        originally posted by <a href"{SourceURL}">{SourceTitle}</a>
                        {block:Date}{TimeAgo}{/block:Date}
                        {block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}
                        {block:PostNotes}{PostNotes-16}{/block:PostNotes}
                        {block:HasTags}{block:Tags} {/block:Tags}<a href="{TagURL}">{Tag}</a>{/block:HasTags}
                    </li>
                {/block:Chat}{block:Video}
                    <li class="post video" id="post">
                        {Video-400}{block:Caption}
                            <div class="caption">{Caption}</div>
                        {/block:Caption}
                        {block:Date}{TimeAgo}{/block:Date}
                        {block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}
                        {block:PostNotes}{PostNotes-16}{/block:PostNotes}
                    </li>
                {/block:Video}{block:Audio}
                    <li class="post audio" id="post">
                        {AudioEmbed}{block:Caption}
                            <div class="caption">{Caption}</div>
                        {/block:Caption}
                        {block:Date}{TimeAgo}{/block:Date}
                        {block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}
                        {block:PostNotes}{PostNotes-16}{/block:PostNotes}
                    </li>
                {/block:Audio}{/block:Posts}
        </ol></div>

        <div class="theme-credit">
  theme by me
</div>
    </body>
</html>

（请忽略不同帖子类型的所有笔记/ reblog信息不同的事实。我决定只在文字帖子上处理这些内容，之后我会复制它并对照片和视频进行相同的调整等等。）

无论如何，非常感谢帮助。并排的帖子实际上不是我能保留的东西。

P.S。如果你需要看到一个视觉，博客网址是http://cosplaysewingcrafts.tumblr.com/，我的基本大纲是假设看起来是http://jsbin.com/bopogi/3。 （当博客上存在多于1个页面时，应显示下一个和后退按钮，因此不必担心。）

0 个答案:

没有答案
相关问题
最新问题