Tumblr多页面布局问题：列表页3列布局与单页/独立页冲突

问题根源 #

你的#container样式是全局生效的，不管是主页、单篇文章页还是自定义页面（比如关于页），都会被应用column-count:3的3列布局，导致非主页的页面显示异常。

解决方案 #

利用Tumblr的模板判断标签，区分不同页面类型，只为主页应用多列布局，其他页面恢复单列。

步骤1：给不同页面添加专属类

修改<body>标签，通过Tumblr的页面判断标签，给主页、单篇页分别添加专属类，方便针对性写样式：

<body id="{select:background}" class="{block:IndexPage}index-page{/block:IndexPage}{block:PermalinkPage}permalink-page{/block:PermalinkPage}">

步骤2：调整CSS样式

替换原来的#container、#house、.content样式，只在主页启用3列瀑布流，其他页面用单列：

#sidebar {
    top: 35%;
    position: -webkit-sticky;
    position: sticky;
    background: #ffffff;
    height: 40vh;
    width: 20%;
    text-align: center;
    padding: 25px 10px 10px 10px;
    border: 2px solid;
    border-radius: 70% 30% / 20% 40%;
    margin: 2% 2%;
}

/* 主页专属的3列瀑布流布局 */
.index-page #container {
    column-count: 3;
    column-gap: 20px;
    width: 75%;
}

/* 默认的container样式（单篇/自定义页） */
#container {
    width: 75%;
    margin: 2% 0;
}

#house {
    display: flex;
    flex-direction: row;
    justify-content: flex-start; /* 修正原right属性，让侧边栏和内容区正常并排 */
}

/* 主页帖子样式 */
.index-page .content{
    width: 100%;
    background-color: #ffffff;
    padding: 20px;
    margin-bottom: 20px;
    break-inside: avoid; /* 防止瀑布流中帖子被列拆分 */
}

/* 单篇/自定义页内容样式 */
.permalink-page .content,
.page-content {
    width: 100%;
    background-color: #ffffff;
    padding: 20px;
}

步骤3：完善页面内容结构

在#container里添加自定义页面的内容块，确保关于页的内容能正常显示：

<div id="house">
    <div id="sidebar">
        <a href="/">
            <h1>{Title}</h1>
        </a>
        <div id="description">
            {Description}
        </div>
        <br />
        <div class="sidebarlink"><a href="{text:link 1 url}">{text:link 1}</a></div>
        <div class="sidebarlink"><a href="{text:link 2 url}">{text:link 2}</a></div>
        <div class="sidebarlink"><a href="{text:link 3 url}">{text:link 3}</a></div>
        <div class="sidebarlink"><a href="{text:link 4 url}">{text:link 4}</a></div>
    </div>

    <div id="container">
        {block:Posts}
        <div class="content">
            [帖子内容]
        </div>
        {/block:Posts}
        <!-- 自定义页面（比如关于页）的内容容器 -->
        {block:Page}
        <div class="page-content">
            {PageContent}
        </div>
        {/block:Page}
    </div>
</div>

额外说明 #

• 你原来的#container里写了grid-template-columns但设了display:inline-block，Grid布局属性不会生效，实际是靠column-count实现的瀑布流，所以删掉了没用的Grid相关代码。
• break-inside: avoid是为了保证瀑布流里的每个帖子完整显示在一列，不会被拆分。

内容的提问来源于stack exchange，提问作者stephi