Tumblr主题开发中文字帖重叠及分页冲突问题求助

问题根因 #

1. 容器宽度不匹配：外层.container宽度仅设为500px，但内部.posts元素本身宽度500px + 左外边距400px，总宽度超出容器宽度导致布局溢出错乱
2. 标签结构错误：HTML代码存在两处标签闭合错误，DOM结构异常会触发浏览器怪异渲染模式，是文字重叠的核心诱因
3. 固定定位分页无避让：右下角固定定位的分页元素没有给帖子流留出右侧安全距离，帖子宽度足够时会和分页重叠
4. 文本换行规则缺失：没有为帖子内容设置强制换行规则，长文本/长链接无法自动换行时会撑破容器导致重叠

修复步骤 #

1. 修复CSS代码 #

替换原有POSTS和GENERIC相关规则，修改后代码如下：

/***GENERIC 新增规则***/
* {
  box-sizing: border-box; /* 统一盒模型计算规则，避免内边距撑宽元素 */
}
.posts * {
  overflow-wrap: break-word;
  word-break: break-word; /* 强制长文本/长链接自动换行，避免撑破容器 */
}

/***POSTS 替换原有规则***/
.container {
  padding: 10px 250px 10px 400px; /* 左侧给侧边栏留空，右侧给分页留250px安全距离 */
  width: 100%; /* 宽度设为100%自适应屏幕 */
  margin: 20px 0 60px 0;
}

.posts {
  width: 100%; /* 自适应父容器宽度 */
  max-width: 500px; /* 限制最大宽度为原来的500px */
  background-color: #fff;
  margin: 60px auto 30px auto; /* 上下边距保留，左右自动居中 */
  padding: 10px;
}

2. 修复HTML标签错误 #

找到两处错误代码替换：

• 原Chat块错误代码：

{block:Chat}{block:Title}{Title}</a>{/block:Title}

替换为：

{block:Chat}{block:Title}{Title}{/block:Title}

（删除多余的</a>闭合标签）

• 原标签块错误代码：

<div class="tags">{block:HasTags}{block:Tags}<a href="{TagURL}"> {Tag}{/block:Tags}</a></div>

替换为：

<div class="tags">{block:HasTags}{block:Tags}<a href="{TagURL}"> {Tag}</a>{/block:Tags}</div>

（调整</a>标签位置到循环内部，保证每个标签链接正常闭合）

3. 可选优化（防止侧边栏内容溢出） #

如果侧边栏内容过长超出屏幕高度，可给#sidebar新增滚动规则：

#sidebar {
  overflow-y: auto;
}

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