侧边栏在所有页面上的显示都不一样

Question

我在 my Blogger 上使用了一个模板，因为它太窄了，我调整了侧边栏和主要帖子栏。它工作得很好，但只适用于主页。

问题是边栏在所有页面上的显示不尽相同。

看到one of the pages侧边栏不一样了

我当前的 CSS 边栏代码是：

#sidebar-wrapper { 
  border-radius: 5px;
  color: #A8AAAC;
  background:rgba(0,0,0,0.1);
  float:left; margin: -2430px 150px 100px -120px;
  width:40%; 
}

侧边栏还有一个代码示例，但即使我尝试更改它也没有任何反应。

#sidebar-wrapper .widget {margin-bottom: 30px;}

#sidebar-wrapper a:hover{color:#fff}

#sidebar-wrapper h2 {
  color: #C8CACC;
  font-size: 14px;
  letter-spacing: 2px;
  line-height: 1.4;
  margin: 30px 0 10px;
  font-family: Oswald,Arial,sans-serif;
  font-weight: bold;
  text-transform: uppercase;
}

Answer 1

您遇到的问题是因为您控制的是带边距的内容，而不是控制主页 id=wrapper div 及其所有 children 的尺寸。您的 header 是 1000px 宽，但您的包装器是 740px 宽。首先让它们宽度相同。

其次，需要删除 main-wrapper 和 side-wrapper 边距。

使用边距在每个页面上以不同方式调整内容是一种非常糟糕的做法。接下来调整两个包装纸的百分比，使其总和达到 100%。我建议您对 side-wrapper 使用 width:30%，对 main-wrapper 使用 68%（为什么从 main-wrapper 中保留 2% 是为了在两者之间提供一点 space包装纸。您可以使用边距来提供 space，但请确保从宽度百分比中减去该边距以使两个包装纸保持在同一行。）

通过一些更多的调整，您可以构建一个干净的 CSS 设置，最终将使用 side-bar 页面修复所有页面。

侧边栏在所有页面上的显示都不一样

Sidebar doesn't appear the same on all pages

html

css

blogger

sidebar