0

HTML、CSS、および Web 開発シーン全体に不慣れなため、既存のページを変更して学習することにしました。以下は、CMS を許可するために必要に応じて変更したテンプレートです。問題は、コンテンツがときどき最も望ましくない位置に移動することです。

気に入らないコンテンツの位置

この問題の原因となっている CSS に何か問題があると思います。

footerとdivを調べたsite_contentところ、違いはほとんど見つかりませんでした。しかし、なぜそれが常にこのように表示されないのかわかりません:

良いコンテンツの位置付け

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

中央のブロックにブロック表示とクリアの両方があることを確認する必要があります。

したがって、次の理由で 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 
#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 ルールがいくつかあるようです。あなたが試すことができる1つのことは、!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 に答える