1. 爱易网页
  2. HTML教程
  3. 关于DIV+CSS的一个弱有关问题.

关于DIV+CSS的一个弱有关问题.

日期：2014-05-17　 浏览次数：21462 次

关于DIV+CSS的一个弱问题.....
<!DOCTYPE   HTML   PUBLIC   "-//W3C//DTD   HTML   4.01   Transitional//EN "
"http://www.w3.org/TR/html4/loose.dtd ">
<html>
<head>
<title> 津报网－2007年全国两会 </title>
</head>
<style   type= "text/css ">
body   {  
BACKGROUND:   #670000;
}  
/*   布局   */
.main3{
width:760px;
background-color:   #FFFFFF;
}
.box6{
width:240px;
float:   left;
background-color:   #00FFFF;
margin-right:   5px;
margin-bottom:   0px;
margin-left:   5px;
}
.box7{
float:   left;
width:290px;
background-color:   #FF00FF;
margin-right:   0px;
margin-bottom:   0px;
margin-left:   0px;
}
.box8{
float:   right;
width:210px;
background-color:   #FFFF00;
margin-right:   5px;
margin-bottom:   0px;
margin-left:   5px;
}  


</style>
<body>

<div   class= "main3 ">
<div   class= "box6 "> 11
    </div>
<div   class= "box7 "> 22
    </div>
<div   class= "box8 "> 33
    </div>
</div>
</body>
</html>  

怎么也不能一行对齐....宽度加一起是760px啊...郁闷...大家帮忙看看,谢谢

------解决方案--------------------
这是经典的IE magin双倍浮动BUG
解决方案：
.box6{
float: left;
width:240px;
background-color: #00FFFF;
margin: 0 5px;
display:inline; /*解决magin双倍浮动BUG*/
}

相关资料更多>

  1. 译自MSDN十分详细的IMG,IFRAME的属性参考手册
  2. 为什么<ul><li>列表元素会横排？该怎么处理
  3. css 定位解决方法
  4. Servlet：htm+javascript+css+servlet （ajax）兑现上传（能显示进度条）
  5. HTML嵌套规约
  6. html宣言前面总是莫名其妙多了空格，回车符，小横点。等等
  7. 转—— JS、CSS的归拢、压缩、缓存管理
  8. 单行文本框怎样才能不回车自动交付
  9. [54没放假再散分]:hover在IE6 and earlier下的有关问题