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

它也适用于我。是什么让你觉得你看不见？尝试将边框设置为 10 像素，看看右侧是否变厚。

于 2012-10-22T20:12:42.090 回答
1

我看不出有什么不对。“右侧边栏” div 就在“右侧主” div 旁边。你使用的是什么浏览器？在 Firefox 上看起来不错。

于 2012-10-22T20:12:24.553 回答
1

从 jsFiddle 使用 Chrome 和 IE8，右侧栏似乎可以正常工作。你用什么浏览器看这个？

于 2012-10-22T20:09:27.690 回答