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

Question

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

可以看到问题... 1

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

Answer 1

{Caption} 变量不允许任何操作，因此您需要使用脚本。虽然有一个插件可以实现这一点，请参阅 un-nest tumblr captions .

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

对于照片帖子，这是他们拥有的代码:

{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 等)，它将恢复返回到您所在的博客的头像。