Html 自定义tumblr主题-并排显示的帖子
我正在创建一个定制的Tumblr主题（大部分情况下进展顺利，但我以前从未做过，我遇到了一个无法解决的问题）。你可能知道，帖子应该一个接一个地出现，所以你可以向下滚动查看下一篇。我的问题是它们并排显示（以奇怪的对角线方式）。这些帖子不是浮动的，所以我不知道他们为什么会这样做 我有以下代码：Html 自定义tumblr主题-并排显示的帖子,html,css,Html,Css,我正在创建一个定制的Tumblr主题（大部分情况下进展顺利，但我以前从未做过，我遇到了一个无法解决的问题）。你可能知道，帖子应该一个接一个地出现，所以你可以向下滚动查看下一篇。我的问题是它们并排显示（以奇怪的对角线方式）。这些帖子不是浮动的，所以我不知道他们为什么会这样做 我有以下代码： <html> <head> <title>{Title}</title> <link rel="shortcut i
<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>.
{/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>
{Title}
{块：描述}
{/block:Description}
$（文档）.ready（函数（）{
document.getElementById（'no-drag'）.ondragstart=function（）{return false；}；
$（'div#page'）.mouseenter（函数（）{
$（this.css（'background'，'#AE95BC'）；
});
$（'div#page'）.mouseleave（函数（）{
$（this.css（'background'，'#372A52'）；
});
});
身体{
利润率：60像素；
}
.侧边栏{
-webkit触摸标注：无；
-webkit用户选择：无；
-khtml用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
宽度：230px；
}
.标题图像{
宽度：230px；
}
李英明{
最大宽度：400px；
}
.头衔{
高度：40px；
宽度：230px；
背景#372A52；
颜色：#ffffff；
字体系列：“LaBelleAurore”，草书；
文本对齐：居中；
填充顶部：14px；
}
#描述{
填充顶部：11px；
高度：25px；
宽度：230px；
背景#372A52；
颜色：#ffffff；
字体系列：“Poiret One”，草书；
文本对齐：居中；
字体大小：10px；
字母间距：2px；
}
#页面{
浮动：左；
高度：33像素；
宽度：33px；
背景#372A52；
颜色：#ffffff；
字体系列：“Poiret One”，草书；
文本对齐：居中；
字体大小：11px；
线高：33px；
-webkit边界半径：50px；
-moz边界半径：50px；
边界半径：50px；
光标：指针；
}
s{
浮动：左；
颜色：透明；
}
#翻页{
字体系列：“Playfair显示”，衬线；
字体大小：12px；
文字装饰：无；
颜色：#372A52；
}
#翻页：悬停{
颜色：#836097；
}
.下一个{
位置：相对位置；
左：147px；
}
ol#posts{
颜色：#372A52；
字体系列：“Playfair显示”，衬线；
字体大小：12px；
位置：绝对位置；
顶部：-17px；
左：395px；
字母间距：1px；
线高：23px；
填充：25px；
宽度：400px；
背景：#FFFFFF；
利润率：60像素；
}
·职位背景{
背景#AE9DB8；
不透明度：0.2；
位置：固定；
顶部：0px；
左：350px；
身高：100%；
宽度：541px；
z指数：-100；
}
梅因先生{
身高：100%；
位置：绝对位置；
顶部：0px；
左：-60px；
填充：0px；
边际：0px；
}
.主题信贷{
字体系列：“Playfair显示”，衬线；
字体大小：10px；
颜色：#372A52；
不透明度：0.6；
位置：固定；
右：35px；
底部：22px；
z指数：-50；
}
/*设置此更多样式*/div.caption{
宽度：420px；
}
{Title}
{block:ShowAvatar}
{/block:ShowAvatar}
{块：描述}
{Description}
{/block:Description}
{block:ShowHeaderImage}
1234
1234
1234
{/block:ShowHeaderImage}
{块：上一页}
{/block:PreviousPage}{block:NextPage}
{/block:NextPage}
{block:Posts}
{block:Text}
{块：标题}
{/block:Title}{Body}
{block:RebloggedFrom}
从重新登录
,
{/block:RebloggedFrom}
原作者
{block:NotReblog}
{/block:NotReblog}
{block:Date}{TimeAgo}{/block:Date}
{block:notecont}
{/block:notecont}
{block:HasTags}
{block:Tags}
.
{/block:Tags}
{/block:HasTags}
{block:PostNotes}
{PostNotes-16}
{/block:PostNotes}
{/block:Text}{block:Photo}
{块：标题}
{标题}
{/block:Caption}
原作者
{block:Date}{TimeAgo}{/block:Date}
{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}
{block:PostNotes}{PostNotes-16}{/block:PostNotes}
{block:HasTags}{block:Tags}{/block:Tags}{/block:HasTags}
{/block:Photo}{block:Panorama}
{LinkOpenTag}
{LinkCloseTag}{块：标题}
{标题}
{/block:Caption}
原作者
{block:Date}{TimeAgo}{/block:Date}
{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}
{block:PostNotes}{PostNotes-16}{/block:PostNotes}
{block:HasTags}{block:Tags}{/block:Tags}{/block:HasTags}
{/block:Panorama}{block:Photoset}
{Photoset-400}{块：标题}
{标题}
{/block:Caption}
原作者
{b