html - CSS 问题 : Fixed column + Auto column with a nested Auto column inside

Question

我得到了以下 HTML 结构:

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

我的 CSS:

#main-container
{
    width:80%;
    margin:20px auto;    
}

#left-column
{
    width:400px;
    float:left;
}

#right-column
{
    width:100%;
    float:right;
    padding:26px 0 0 0;
}

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

我尝试将它的宽度设置为 70%，直到我调整窗口大小，然后右栏与左栏重叠时才可以。

谢谢!

Answer 1

将右列的宽度设置为 100% 意味着它将占据容器的整个宽度，而不是整个宽度减去容器内的其他元素。

我建议你实现逐列结构(其中一列具有固定宽度，另一列占用剩余空间)如下:

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

这是一个 example .