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及其所有子节点的维度。您的标题为1000px宽，但您的包装为740px宽。首先使它们的宽度相同。

其次，需要删除主包装器和侧包装器边距。

使用边距在每个页面上以不同方式调整内容是一种非常糟糕的做法。接下来调整两个包装的百分比，总计达到100％。我建议你使用width:30%作为side-wrapper，使用68％作为main-wrapper（为什么从主包装器中留下2％是为了在两个包装器之间留出一点空间。你可以使用margin来提供空间但是确保从宽度百分比中扣除该边距，以使两个包装器保持在同一行。）

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

边栏在所有页面上看起来都不一样

1 个答案: