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。

Answer 2

我无法理解的是为什么右栏而不是占用它在主容器中的空间（因此占80％）整个屏幕减去400px）

这是因为宽度：100％;是100％的包含元素（＃main-container的100％） - ＃right-column不关心任何兄弟元素上的400px（即＃left-column）

CSS问题：固定列+自动列，里面有嵌套的自动列

2 个答案: