最近，我一直在尝试编写自己的 Tumblr 博客主题。现在，我对 HTML 有一定的了解，并且在 CSS 方面经验丰富。但是，我似乎无法将主题中的帖子分开。我使用的代码如下:
<!DOCTYPE html>
<html>
<head>
<meta name="color:Background" content="#000000">
<meta name="font:Body" content="Georgia" />
<meta name="image:Background" content="http://i41.tinypic.com/wvztsk.png" />
<meta name="color:Primary Colour" content="#03999b" />
<meta name="color:Secondary Colour" content="#4cc3c5" />
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<title>{Title}{block:PostSummary}, {PostSummary}{/block:PostSummary}</title>
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
<link rel="shortcut icon" href="{Favicon}" />
<style type="text/css">
/* Header */
.headerstuff {
background-color: black;
color: silver;
height: 25px;
width: 100%;
text-align: center;
text-decoration: none;
font-style: italic;
margin: -10px;
padding-top: 12px;
padding-bottom: -2px;
position: fixed;
font-family: 'Raleway', cursive;
}
body {
background-color:{color:Background};
font-family:{font:Body};
}
.links {
color: red;
text-align: left;
}
#content {
padding:10px;
background-color: #000000;
font-family: 'Raleway', cursive;
font-size: 25px;
max-width: 500px;
}
.contentcontainer {
width:1480px;
padding-left: 100px;
padding-top: 50px;
}
#contentcontainer #content {
background-color: white;
width: 500px;
margin: 0 auto 20px;
padding:10px;
}
#content .title {
font-family: 'Raleway', cursive;
font-size:30px;
color: silver;
padding-left: 10px;
border-bottom: 1px solid silver;
text-align: center;
}
.text {
color: white;
font-size: 20px;
font-family: 'Raleway', cursive;
padding-left: 20px;
font-style: italic;
}
</style>
</head>
<body>
<header>
<div class="headerstuff">"Welcome to Neverland!"</div>
</header>
<div class="contentcontainer">
<div id ="content">{block:Posts}
{block:Text}
{block:Title}<div class="title">{Title}</div>{/block:Title}
<div class="text">{Body}</div>
{/block:Text}
{/block:Posts}
</div>
</div>
</body>
</html>
到目前为止，我只编写了文本方面的代码，但正如您在提供的屏幕截图中看到的那样，我似乎无法将两个文本分开在两个单独的框中。有人帮忙吗？
最佳答案
{block:Posts} 和 {/block:Posts} 中的任何内容都会为每个帖子呈现。
所以要将每个帖子保存在单独的 DIV 中，您的代码应该是这样的；
<body>
<header>
<div class="headerstuff">"Welcome to Neverland!"</div>
</header>
<div class="contentcontainer">
{block:Posts}
<div class="content">
{block:Text}
{block:Title}<div class="title">{Title}</div>{/block:Title}
<div class="text">{Body}</div>
{/block:Text}
</div>
{/block:Posts}
</div>
</body>
然后使用 CSS margin 为 .content 在每个帖子之间留出一些空间。
还请记住将 CSS 中的 #content 更改为 .content。
参见 documentation寻求更多帮助。还有一个示例主题的 HTML 标记，包含 Tumblr 当前支持的所有类型的帖子(Answer 帖子除外)。
关于html - 在 Tumblr 中分隔帖子，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33424563/