在firefox里宽度自适应的问题
在firefox里宽度自适应的问题,分两列布局,左边隐藏时,右边100%显示,左边展开时,右边自适应宽度显示,代码如下,在ie6.0下正常,在firefox里就不行。
<div id= "workplace_box ">
<div class= "workplace_box_nav " id= "treeView ">
左列导航,通过js隐藏或显示。
</div>
<div class= "workplace_box_image ">
<div class= "workplace_nav_show " onclick= "show( 'treeView ', 'img ') " id= "img ">
</div>
</div>
<div class= "workplace_box_main ">
右列内容
</div>
</div>
css
#workplace_box
{
width: 100%;
}
.workplace_box_nav
{
position: relative;
top: 0px;
left: 0px;
width: 200px;
height: auto;
float: left;
display: none; /*通过js修改显示属性*/
}
.workplace_box_image /* 显示/隐藏按钮图标位置*/
{
position: relative;
top: 25px;
left: auto;
width: 15px;
height: auto;
float: left;
cursor: pointer;
}
.workplace_box_main
{
position: relative;
top: 0px;
left: auto;
width: auto; /* firefox 不能自适应宽度 */
max-width: 98%; /*在firefox下不设置这个属性,宽度无法正常显示,但设置了这个属性,左边展开的时候,宽度不能调整*/
height: auto;
float: right;
}
怎么修改css才能适应firefox呢,谢谢!
------解决方案--------------------#workplace_box
{
width: 100%;
}
.workplace_box_nav
{
width: 200px;
height: auto;
*float: left;
display: none; /*通过js修改显示属性*/
}
.workplace_box_image /* 显示/隐藏按钮图标位置*/
{
width: 15px;
height: auto;
*float: left;
display: table-cell;
cursor: pointer;
}
.workplace_box_main
{
width: auto; /*firefox 不能自适应宽度 */
height: auto;
*float: right;
display: table-cell;
}