为什么这个div列不会一直向右？

Question

绰绰有神，我的网站在Internet Explorer中渲染得很好，但在基于Mozilla的浏览器中失败了。

以下是截图：

有谁知道为什么“右小组”不会一直向右走？您可以看到它与“顶部面板”的右边缘没有对齐：

#container
{
    margin: 0 auto;
    width: 750px;
    background-color: #ffffff;
}

#top-panel
{
    padding-left: 10px;
    background-color: #000000;
    text-align: left;
    width: 100%;
    height: 88px;
}

#left-panel
{
     padding-top: 10px;
     text-align: center;
     background-color: #ffffff;
     border-right: 1px dashed #000000;
     float: left;
     width: 250px;
}

#right-panel
{
    background-color: #ffffff;
    float: right;
    width: 449px;
}

.clear
{
    clear:both;
    line-height:0;
}

如果有人想查看实际网站，请执行以下操作：Math Relay

Answer 1

当你应用宽度：100％并使用 padding-left：10px 时，它首先计算宽度，然后应用填充，所以实际上你的 #top_panel CSS声明就是问题所在。尝试将其设置为固定宽度。

Answer 2

是填充左：10px;在#top-panel

中

将其设置为0，您将看到它们对齐。

尝试使用FireBug，这就是我发现问题的方法。

Answer 3

Padding-Left：10px导致额外的10个像素出现在右侧。

Answer 4

与其他答案一致，但希望能够解释幕后发生的事情：

width: 100%上的#top-panel是指div的内容区域的宽度，不包括边框，填充和边距。因此，当您同时指定width: 100%和padding-left: 10px时，#top-panel的宽度（包括填充）实际上是10px + 750px（填充加上#container宽度的100％。）< / p>

我认为最好的解决方案是从width: 100%中移除#top-panel。这将使div占用父元素的整个宽度而不会溢出#container。

在Internet Explorer中页面看起来没问题，因为如果页面以怪异模式呈现，IE在计算div的宽度时错误地包含填充和边框。有关此错误的更多详细信息，请参见here。

Answer 5

由于#top-panel

，10px #container大于padding-left: 10px; 10px

只需将#container添加到{{1}}即可。

Answer 6

从width: 100%删除#top-panel。