对齐下面的 Tumblr 块引用，而不是在彼此之间

Question

我是 HTML/CSS 的新手。我决定学习它，这样我就可以编写自己的 Tumblr 主题（我很自豪地说它快完成了！）。我正在尝试以块引号的形式设置回复的样式。我希望它们一个接一个地排成一行，就像一个接一个的矩形（如论坛帖子等），但我不知道如何排列。目前，它们相互堆叠，默认情况下：

可以看到问题了...1

如有任何建议，我们将不胜感激。请并谢谢你:)

Answer 1

{Caption} 变量不允许任何操作，因此您需要使用脚本。不过，有一个插件可用于实现此目的，请参阅 un-nest tumblr captions。

或者，如果您查看新的默认 tumblr 主题代码，您会发现他们使用了大量未记录的变量来实现此目的。

对于照片 post，这是他们的代码：

{block:NotReblog}
<figcaption class="caption">
    {Caption}
</figcaption>
{/block:NotReblog}

{block:RebloggedFrom}
<div class="reblog-list">
    {block:Reblogs}
    <div class="post-reblog-trail-item{block:isOriginalEntry} original-reblog-content{/block:isOriginalEntry}">
        <div class="post-reblog-header">
            <div class="post-avatar">
                <div class="post-avatar-wrapper">
                    {block:IsActive}
                    <a class="post-avatar-link{block:isNotOriginalEntry} sub-icon-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank">
                        <img class="post-avatar-image" src="{PortraitURL-64}">
                    </a>
                    {/block:IsActive}
                    {block:IsDeactivated}
                    <span class="inactive reblog-avatar{block:isNotOriginalEntry} sub-icon-reblog{/block:isNotOriginalEntry}">
                        <img class="post-avatar-image" src="{PortraitURL-64}">
                    </span>
                    {/block:IsDeactivated}
                </div>
            </div>
            {block:IsActive}
            <a target="_blank" class="post-tumblelog-name" href="{Permalink}">{Username}</a>
            {/block:IsActive}
            {block:IsDeactivated}
            <span class="inactive post-tumblelog-name">{Username}</span>
            {/block:IsDeactivated}
        </div>
        <div class="post-reblog-content">
            <div class="post-body">
                {Body}
            </div>
        </div>
    </div>
    {/block:Reblogs}
</div>
{/block:RebloggedFrom}

另请注意：根据我对上述代码的实验，如果您将 {Portrait-64} 更改为任何其他标准的 tumblr 头像大小（如 30、24 等），它将恢复为仅博客你的头像。

对齐下面的 Tumblr 块引用，而不是在彼此之间

Aligning Tumblr blockquotes below, not within, one another

html

css

tumblr