css - 奇怪的网页内容移动

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;
}