0

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

不同的内容位置

我相信我的 CSS 有问题导致了这个问题。

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

内容定位不错

CSS 太大，无法放在这里，但整个源代码可以在GitHub 上的 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;
}

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

4

3 回答 3

0 
#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

于 2014-12-20T15:47:14.820 回答
0

嘿，您需要确保中心块具有块显示和清除：两者。

所以你应该更新你的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;
}

就是这样。玩得开心！

于 2014-12-20T15:54:18.173 回答
0

看起来您在这里可能有一些冲突的 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;
}
于 2014-12-20T16:00:15.917 回答