CSS:页面分为 3 列，无法在 Firefox 上运行

Question

我想将一个页面分成 3 列。中间的一个将包含“内容”，而其他的将包含一个菜单，因此，我希望在用户(垂直)滚动页面时固定横向列。该代码适用于 Chrome 和 Internet Explorer，但在 Firefox 上，左侧的列折叠在右侧的列上，我不明白为什么。这是代码(如果你在不同的浏览器上打开它，你会注意到不同之处): http://jsfiddle.net/mattyfog/6rn3j/4/

HTML

<div id="left-col">LEFT</div>
<div id="main">MAIN</div>
<div id="right-col">RIGHT</div>

CSS

#main {
    width: 50%;
    display: inline-block;
    float: left;
    padding-left: 25%;
    background-color: grey;
}

#right-col {
    float: left;
    background-color: yellow;
}

#left-col {
    float: right;
    background-color: blue;
}

#right-col, #left-col {
    position: fixed;
    width: 25%;
    min-width: 140px;
    margin: 0px;
    display: inline-block;
}

谢谢大家

Answer 1

我不确定为什么 Firefox 表现得很奇怪，但我认为做你想做的事情的正确方法是这样的:

我从 #main 中删除了 float 并将其 padding-left 更改为 margin-left 现在它是在浏览器上工作 ( fiddle )。

#main {
    width: 50%;
    display: inline-block;
    /*float: left;*/
    margin-left: 25%;
    background-color: grey;
}

#right-col {
    float: right;
    background-color: yellow;
}

#left-col {
    float: left;
    background-color: blue;
}

#right-col, #left-col {
    position: fixed;
    width: 25%;
    min-width: 140px;
    margin: 0px;
    display: inline-block;
}