Html CSS问题：固定列+；内部带有嵌套自动列的自动列

我得到了以下HTML结构：

<div id="main-container">
    <div id="left-column">...</div>
    <div id="right-column">...</div>
</div>

非常典型的布局，没什么特别的。但我无法理解的是，为什么右栏没有占据主容器中的空间（整个屏幕的80%减去400px），而是跨越整个主容器，并被推到左栏下方

我试着将它的宽度设置为70%，直到我调整窗口大小，然后右栏与左栏重叠，这一切都没问题

---

谢谢

将右列的宽度设置为100%意味着它将采用容器的全宽，而不是减去容器内其他元素的全宽

我建议您实现逐列结构（其中一列具有固定宽度，另一列占用剩余空间），如下所示：

#left-column
{
    width: 400px;
    float: left;
}    
#right-column
{
    padding: 26px 0 0 0;
    margin-left: 410px;
}

这是一个例子

但我不明白的是，为什么要选择正确的列而不是 占用主容器中的空间（因此80%的 全屏幕负400px）

---

这是因为宽度：100%；是其包含元素的100%（主容器的100%）-#右列不关心任何同级元素上的400px（即#左列）

，但在本例中，右列的大小不取决于其内容的大小吗？不，它不是浮动的，因此它将使用所有可用的宽度（所有块级元素都是）

#left-column
{
    width: 400px;
    float: left;
}    
#right-column
{
    padding: 26px 0 0 0;
    margin-left: 410px;
}