0

*これをチェックしてくれてありがとう。インデックスページ用に別のテンプレートファイルがあり、編集するのを忘れたようです。これに2時間取り組んだのはばかげている！時間を無駄にしてすみません。*

div id="right-sidebar"をページの右側に配置しdiv id="right-main"、残りのスペースを左側に配置しようとしています。はdiv id="right-main"うまく整列してスペースを埋めていますが、右側のサイドバーはどこにも見つかりません。右側のサイドバーを右側に表示するために、ここで私が間違っていることを誰かが理解できますdiv id="right-main"か？

これが私のhtmlです：

<div id="page-wrap"align="center">
  <div class="main" align="center">
    <div id="header" align="left"></div>
    <div id="subheader" align="bottom"></div>
    <div id="right-sidebar"></div>
    <div id="right-main"></div>
    <div id="footer"></div>

  </div>

</div>

これが私のCSSです：

#page-wrap {
    padding:10px 10px 10px 10px;
    background:#FFFFFF;
}

.main {
    /*min-width: 780px;*/
    max-width: 1260px;
    position: relative;
    text-align:left;
    padding:10px 10px 10px 10px;
    border:1px solid #777777;

    /* Gradient background */
    background:#FFF;
    background: -moz-linear-gradient(top, #5e99d4, #c4d7ea);
    background: -webkit-gradient(linear, 0% 0%, 0% 75%, from(#5e99d4), to(#c4d7ea));

    /* Rounded Corners */
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
}


#header {
    padding:10px 20px 10px 10px;
    width: 90%;
    }

#sitepic {
    height: 80px;
    margin: 0 auto;
    padding: 5px;
    float: left; 
}
#p

#subheader {
    margin-left: 10px;
    margin-top: 20px;
    padding: 0px 10px 0px 10px;
    }

#wrapper {

}

#right-sidebar {
    float: right;
    width: 200px;
    min-height: 300px;
    background: #CCCCCC;
    text-align:left;
    padding:10px 5px 10px 5px;
    border:1px solid #777777;
    /* Rounded Corners */
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
}

#right-main {
    height: auto;
    min-height: 300px;
    margin-right: 210px;
    background: #FFFFFF;
    text-align:left;
    padding:10px 5px 10px 5px;
    border:1px solid #777777;
    /* Rounded Corners */
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
    }

#footer {
    height: auto;
    margin-top: 10px;
    min-height: 40px;
    background: #5e99d4;
    position: relative;
    text-align:left;
    padding:10px 5px 10px 5px;
    border:1px solid #777777;
    /* Rounded Corners */
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
    }
4

3 に答える 3

2

それは私にも役立ちます。どうして見えないの？境界線を10pxにして、右側が太くなるかどうかを確認してください。

于 2012-10-22T20:12:42.090 に答える
1

ChromeとIE8を使用しているjsFiddleからは、右側のサイドバーが正しく機能しているように見えます。これをどのブラウザで表示していますか？

于 2012-10-22T20:09:27.690 に答える
1

何も悪いことはありません。「右側のサイドバー」のdivは、「右側のメイン」のdivのすぐ横にあります。どのブラウザを使用していますか？Firefoxでは問題ないようです。

于 2012-10-22T20:12:24.553 に答える