0

ここで表示可能なこのアメリカ コミュニティ カレッジ協会のウェブサイトを再作成しており、これまでのところ問題なく動作していますが、画像で div を配置するときに問題が発生しました (ここで私の WIP と完全なコードを表示できます)。特にサイドバーを処理する必要があります。実際のウェブページを見るとわかるように、ヘッダーとバナー/サイドバーの間に隙間があります。ただし、私の Web ページでは、画像とバナーの間にマージンを作成することはできましたが、サイドバーは (何をしても) 実際の Web サイトを複製することはできません。

CSS で display:inline-block を使用していましたが、このタグを使用するとマージンの指定が無視されることを読みました。ポジショニングを台無しにしたくないので（ウィンドウのサイズに関係なくページは中央に配置されたままになり、そのままにしておきたいです！）、代替案が何であるか疑問に思っていたので、使用しませんでした。 「サイドバー」div の float:right タグ。コードを改善するための提案をいただければ幸いです。私のページに移動してソースコードを表示したくない場合に備えて、問題のcssコードは次のとおりです。

#header {width:970px; height:105px; position:absolute; top: 0px; background-color:#C0C0C0;}

#navbar{text-align:right;}
#navbar a{text-decoration:none; color:#787878;}

#logoalign{vertical-align:bottom;}

#banner {float:left; display:inline-block; width:730px; padding-top:105px; margin-top:10px}

#sidebar{display:inline-block; padding-top:110px; margin-top:10 px; width: 240px; height:700px; background-color:#33FF33}
4

1 に答える 1

0

サイドバーとバナーの div を含む div 内に配置します。

#navbar{
    margin: 0px 10px;
    width: 610px;
    height: 50px; }

#content {
    margin: 10px; }

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

#sidebar {
    margin-left: 410px; 
    width: 200px;
    height: 500px; }

ここにjsfiddleがあります。

于 2013-11-07T23:53:26.277 に答える