Question

*感谢大家对此进行检查。看来我的索引页面有一个单独的模板文件，我忘了编辑它。我为此工作了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;
    }

Answer 1

它对我也有用。是什么让你觉得你看不到它？尝试将边框设置为10px，看看右侧是否变厚。

Answer 2

右侧边栏似乎可以使用Chrome和IE8从jsFiddle正常工作。您在哪个浏览器中查看此内容？

Answer 3

我没有看到任何错误。 “右侧边栏”div位于“右侧主”div旁边。你使用的是什么浏览器？它在Firefox上看起来很好。

两个div并排，右div固定宽度，左div占用剩余空间

3 个答案: