0

私は AACC の Web サイト (ここのページ) を再作成していますが、「国家イニシアチブ」、「主要な進歩」、および「賞プログラム」というタイトルの列を中央に揃えようとすると、いくつかの問題に遭遇しました。css hereで表示できる私のソースコードでは、ログインエリアとサイドバーの左側にクリントンの写真のバナーが浮かぶように作成しました。ただし、clear:both を使用すると、最初の列 (ページの下部に表示されます) は右側のサイドバーの下にとどまります。これを修正する方法が完全にはわかりません。おそらく、 clear プロパティをコード内の間違った場所に置いているか、問題が何であれ. これに新鮮な目を向けることができました。

問題を修正できると思われるCSSコードは次のとおりです。

#banner {float: left; width: 730px;}

#logbar {
background-color: rgb(95, 193, 47); color:#FFFFFF; padding: 3px; margin-left: 740px; width: 240px; height: 130px;}

#sidebar{margin-left: 740px; width: 240px; height: 700px; padding:1px; background-color: #66CC66; margin-top: 3px;}

#col1{float:left; width:236; height;300px; background-color:rgb(204, 227, 251);}
4

1 に答える 1

0

HTML 構造で可能であることを確認できる唯一の方法は、要素を完全に配置することです。

#col1 {
  top: 420px;           /* Add this */
  position: absolute;   /* And this */
  width: 236px;
  background-color: rgb(204, 227, 251);
}

ただし、これは実際には単なるハックです。HTML を再構築する必要があります。AACC は良い例ではありません。レイアウトにテーブルを使用しています。より良い例として、stackoverflow がサイドバーを作成する方法を見てください。

于 2013-11-10T00:40:12.090 に答える