div+css有关问题 float之后的宽度有关问题
日期：2014-05-17 浏览次数：20640 次
div+css问题 float之后的宽度问题。
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns= "http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=utf-8 " />
<title> </title>
<style type= "text/css " media= "screen ">
*{
margin:0;
padding:0;
}
body{
background-color:#fff;
font-size:12px;
text-align:center;
}
ul{
list-style:none;
}
#main{
clear:both;
margin:8px auto 0 auto;
}
#left{
float:left;
margin:0 0 0 8px;
width:150px;
}
#mainmenu{
margin-top:8px;
font-size:14px;
}
#mainmenu li{
height:30px;
line-height:30px;
text-align:left;
}
#mainmenu li span{
margin-left:10px;
}
.t{
background-color:#c3d9ff;
}
#right{
float:left;
margin:0 8px 0 0;
height:50px;
background-color:#c3d9ff;
display:inline;
}
#submenu{
margin:3px;
height:21px;
line-height:21px;
text-align:left;
background-color:#e0ecff;
}
#submenu span{
margin:0 6px;
}
</style>
</head>
<body>
<div id= "main ">
<div id= "left ">
<div id= "mainmenu ">
<ul>
<li class= "t "> <span> 新闻管理 </span> </li>
<li> <span> 公告管理 </span> </li>
<li> <span> 分类管理 </span> </li>
</ul>
</div>
</div>
<div id= "right ">
<div id= "submenu "> <span> 小类设置 </span> <span> 增加新闻 </span> <span> 推荐管理 </span> </div>
<div id= " "> 具体操作页 </div>
</div>
</div>
</body>
</html>
其中#right在IE中显示的宽是网页可见宽度去掉#left的宽度，在firefox中#right的宽度就是它内部的元素宽度，问题是如何设置才能让#right在Firefox中也满宽？
就像table中的两列 设置了其中一列的绝对宽度，另一列就自动分配剩下的宽度。
------解决方案--------------------
> > > 就像table中的两列 设置了其中一列的绝对宽度，另一列就自动分配剩下的宽度
foxfire弱智
------解决方案--------------------
楼主是要左列定宽，右列自适应的布局么？
如果是，那么右列不要浮动。浮动的元素，会被压缩为其内容的最小宽度，这个是规定，而不是ff的问题。不浮动的元素才会尽量充满父元素的宽度。
这种布局大致应该如下设置：
#left {
float:left;
width:150px;
}
#right {
margin-left:158px;
}
<div id= "left "> left </div>
<div id= "right "> right </div>
------解决方案--------------------
firefox 的背景会有差异
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns= "http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=utf-8 " />
<title> </title>
<style type= "text/css " media= "screen ">
*{
margin:0;
padding:0;
}
body{
background-color:#fff;
font-size:12px;
text-align:center;
}
ul{
list-style:none;
}
#main{
clear:both;
margin:8px auto 0 auto;
}
#left{
float:left;
margin:0 0 0 8px;
width:150px;
}
#mainmenu{
margin-top:8px;
font-size:14px;
}
#mainmenu li{
height:30px;
line-height:30px;
text-align:left;
}
#mainmenu li span{
margin-left:10px;
}
.t{
background-color:#c3d9ff;
}
#right{
float:left;
margin:0 8px 0 0;
height:50px;
background-color:#c3d9ff;
display:inline;
}
#submenu{
margin:3px;
height:21px;
line-height:21px;
text-align:left;
background-color:#e0ecff;
}
#submenu span{
margin:0 6px;
}
</style>
</head>
<body>
<div id= "main ">
<div id= "left ">
<div id= "mainmenu ">
<ul>
<li class= "t "> <span> 新闻管理 </span> </li>
<li> <span> 公告管理 </span> </li>
<li> <span> 分类管理 </span> </li>
</ul>
</div>
</div>
<div id= "right ">
<div id= "submenu "> <span> 小类设置 </span> <span> 增加新闻 </span> <span> 推荐管理 </span> </div>
<div id= " "> 具体操作页 </div>
</div>
</div>
</body>
</html>
其中#right在IE中显示的宽是网页可见宽度去掉#left的宽度，在firefox中#right的宽度就是它内部的元素宽度，问题是如何设置才能让#right在Firefox中也满宽？
就像table中的两列 设置了其中一列的绝对宽度，另一列就自动分配剩下的宽度。
------解决方案--------------------
> > > 就像table中的两列 设置了其中一列的绝对宽度，另一列就自动分配剩下的宽度
foxfire弱智
------解决方案--------------------
楼主是要左列定宽，右列自适应的布局么？
如果是，那么右列不要浮动。浮动的元素，会被压缩为其内容的最小宽度，这个是规定，而不是ff的问题。不浮动的元素才会尽量充满父元素的宽度。
这种布局大致应该如下设置：
#left {
float:left;
width:150px;
}
#right {
margin-left:158px;
}
<div id= "left "> left </div>
<div id= "right "> right </div>
------解决方案--------------------
firefox 的背景会有差异
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
