我正在尝试将页面分为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;
}
谢谢你们
答案 0 :(得分:1)
我不确定为什么Firefox会表现得很奇怪,但我认为正确的做法是这样的:
我从float
移除#main
并将其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;
}