【发布时间】：2021-10-22 16:32:26
【问题描述】：
我是创建主题的新手，我创建了一个side blog 用于练习。我不知道为什么，但文本帖子似乎相互重叠，然后与其他帖子以及右下角的分页发生冲突。我不确定如何解决此问题，也不确定是什么原因造成的。
这是 tumble 博客主题的 CSS。
<style type="text/css">
/***SIDEBAR***/
#sidebar {
position: fixed;
height: 100%;
width: 270px;
left: 0px;
top: 0px;
background-color: #fff;
}
#description {
font-size: 12px;
color: #3a3a3a;
text-align: justify;
padding-left: 5%;
padding-right: 5%;
}
/***GENERIC***/
body {
background-color: #f2f2f2;
font-family: 'Yeon Sung';
font-size: 14px;
color: #3a3a3a;
}
a {
text-decoration: none;
color: #9f815d;
-webkit-transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
-o-transition: all 0.7s ease;
}
a:hover {
color: #c0c0c0;
}
b, strong {
color: #9f665d;
}
i, em {
color: #9a9f5d;
}
blockquote {
padding: 2px 7px;
margin: 3px 0 3px 8px;
border-left: 1px dotted #c0c0c0;
}
blockquote img {
max-width: 100%;
height: auto;
}
img {
max-width: 100%;
}
h1 {
font-family: 'UnifrakturMaguntia';
font-size: 30px;
line-height: 30px;
text-align: right;
padding-left: 5%;
padding-right: 5%;
}
#links {
font-size: 13px;
padding-left: 5%;
padding-right: 5%;
padding-top: 5%;
}
#links a {
display: inline-block;
color: #3a3a3a;
padding: 2%;
-webkit-transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
-o-transition: all 0.7s ease;
}
#links a:hover {
color: #c0c0c0;
}
/***POSTS***/
.container {
padding:10px;
width:500px;
margin-left:0px;
margin-top:20px;
margin-bottom:60px;
}
.posts {
width: 500px;
background-color: #fff;
margin-top:60px;
margin-left: 400px;
padding: 10px;
margin-bottom: 30px;
}
/***PERMALINKS & TAGS***/
.permalinks {
text-align: center;
}
.permalinks a {
text-decoration: none;
font-size: 12px;
color: #3a3a3a;
}
.permalinks a:hover {
color: #5d9e9f;
}
.tags {
text-align: center;
}
.tags a {
text-decoration: none;
text-transform: uppercase;
font-size: 10px;
color: #3a3a3a;
}
.tags a:hover {
color: #715d9f;
}
/***PAGINATION***/
#pagination {
position: fixed;
bottom: 30px;
right: 100px;
}
#pagination a {
color: #3a3a3a;
font-size: 18px;
-webkit-transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
-o-transition: all 0.7s ease;
}
#pagination a:hover {
color: #c0c0c0;
}
和 HTML：
<body>
<div class="container">
<!---SIDEBAR--->
<div id="sidebar">
<h1>{Title}</h1>
<div id="description">{block:Description}{Description}{/block:Description}</div>
<div id="links">
<a href="/">home</a>
<a href="/ask">ask</a>
<a href="/archive">archive</a>
<a href="">link</a>
<a href="">link</a>
<a href="">link</a></div></div>
<!---POSTS--->
{block:Posts}<div class="posts">
{block:Text}{block:Title}{Title}{/block:Title}{Body}{/block:Text}
{block:Photo}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{block:Caption}{Caption}{/block:Caption}{/block:Photo}
{block:Panorama}{LinkOpenTag}<img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>{LinkCloseTag}{block:Caption}{Caption}{/block:Caption}{/block:Panorama}
{block:Photoset}{Photoset}{block:Caption}{Caption}{/block:Caption}{/block:Photoset}
{block:Quote}"{Quote}"{block:Source}{Source}{/block:Source}{/block:Quote}
{block:Link}<a href="{URL}" class="link" {Target}>{Name}</a>{block:Description}{Description}{/block:Description}{/block:Link}
{block:Chat}{block:Title}{Title}</a>{/block:Title}
{block:Lines}<li>{block:Label}{Label}{/block:Label}{Line}</li>{/block:Lines}{/block:Chat}
{block:Video}{Video-500}{block:Caption}{Caption}{/block:Caption}{/block:Video}
{block:Audio}{AudioEmbed}{block:Caption}{Caption}{/block:Caption}{/block:Audio}
<!---PERMALINK & TAGS--->
<div class="permalinks"><a href="{permalink}">{DayOfMonth}{DayOfMonthSuffix} {ShortMonth} {Year} </a><a href="{permalink}">{block:NoteCount}{NoteCount}{/block:NoteCount}</a></div><div class="tags">{block:HasTags}{block:Tags}<a href="{TagURL}"> {Tag}{/block:Tags}</a></div>
</div>{/block:Posts}
</div>
<!---PAGINATION--->
<div id="pagination">{block:Pagination}
{block:PreviousPage}<a href="{PreviousPage}">prev</a>{/block:PreviousPage}
{block:NextPage}<a href="{NextPage}">next</a>{/block:NextPage}
{/block:Pagination}</div>
{block:ContentSource}
<!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
{/block:SourceLogo}
{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
{/block:ContentSource}
</body>
</html>
【问题讨论】：
-
看起来您在某处可能没有正确关闭标签。您的帖子应该在循环中输出。但是在您的页面上有几个分页块具有唯一的 id（id 应该只在页面上存在一次）。上面示例中的代码是否与您博客中的代码相同？
-
@lharby，谢谢，我会检查是否遗漏了任何结束标签或错误放置它们。另外，是的，这段代码与我博客上的代码相同。