奇怪的网页内容运动

Question

所以我对 HTML、CSS 和整个 Web 开发场景都是新手，所以我决定通过更改现有页面来学习。下面是一个模板，我已经根据自己的需要进行了修改以允许我的 CMS。问题是，内容不时移动到最不受欢迎的位置。

我认为我的 CSS 有问题导致了这个问题。

在检查footer 和site_content div 后，我发现几乎没有区别。但我不知道为什么它不总是这样显示：

CSS 太大，无法放在这里，但可以在GitHub under OrangeCider 上找到完整的源代码。但是我正在输入（我认为是）相关的代码：

#main, #logo, #menubar, #site_content, #footer {
  margin-left: auto; 
  margin-right: auto;
}
#site_content {
  width: 837px;
  overflow: hidden;
  margin: 0 auto 0 auto;
  padding: 20px 24px 20px 37px;
  background: #FFF url(content.png) repeat-y;
}

更新：所以看来，如果我从#site_content 中删除overflow: hidden;，内容会显示它应该如何显示，除了与页脚顶部的侧边栏重叠的文本。会不会是溢出的问题？

Answer 1

您的 CSS 规则似乎有些冲突。您可以尝试的一件事是 !important 关键字。

#main, #logo, #menubar, #site_content, #footer {
  margin: 0 auto !important;
}

另外，为了确保float: left 不会干扰您的样式，请将clear: both 放在#site_content 上。

#site_content {
  width: 837px;
  display: block;
  overflow: hidden;
  clear: both;
  padding: 20px 24px 20px 37px;
  background: #fff url(content.png) repeat-y;
}

Answer 2

#main, #logo, #menubar, #site_content, #footer {
  margin-left: auto; 
  margin-right: auto;
}

#site_content {
 clear:both;
 width: 837px;
 overflow: hidden;
 margin: 0 auto;
 padding: 20px 24px 20px 37px;
 background: #FFF url(content.png) repeat-y;
}

试试这个css

Answer 3

你好，你需要确保中心块有块显示和清除：两者。

因此，您应该更新您的 CSS：

#main, #logo, #menubar, #site_content, #footer {
  margin-left: auto; 
  margin-right: auto;
}

#site_content {
  width: 837px;
  display: block;
  overflow: hidden;
  clear: both;
  margin: 0 auto;
  padding: 20px 24px 20px 37px;
  background: #fff url(content.png) repeat-y;
}

就是这样。玩得开心！