当前位置：首页 → 问答吧 → 一个小小的DIV CSS问题

一个小小的DIV CSS问题

时间：2011-08-17

来源：互联网

#container { width:980px; margin:0 auto; }
/*a区开始*/
#tsyx999a { width:980px; margin-top:100px; margin:auto; height:27px; }
#tsyx999a_l { float:left; width:5px; }
#tsyx999a_m { background-image:url(a_m_bg.jpg); background-repeat:repeat-x; width:970px; height:27px; float:left; }
#tsyx999a_m span { color:#4675a6; float:right; margin-left:10px; line-height:27px; background-color:#8aceed; }
#tsyx999a_r { width:5px; margin-left:975px; }
/*a区结束*/

<div class="container">
<div id="tsyx999a">
<div id="tsyx999a_l"><img src="tsyximg/a_l_bg.jpg"/></div>
<div id="tsyx999a_m"> <span>加入收藏</span> <span>设为首页</span> <span>网站地图</span> </div>
<div id="tsyx999a_r"><img src="tsyximg/a_r_bg.jpg"/></div>
</div>
</div>

为什么这样写IE6里边老是显示三行呢？？

就是想实现这样一个条儿：

作者: wxl543 发布时间: 2011-08-17

IE6 有些BUG，所以建议你使用IE8或IE7都行，IE6对开发没有好处！

作者: huangmeichang_520 发布时间: 2011-08-17

楼主看不到图~·

作者: MuBeiBei 发布时间: 2011-08-17

看看是不是你想要的效果
HTML code


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSDN</title>
<style>
*{margin:0;padding:0;}
#container { width:980px; margin:0 auto;}
/*a区开始*/
#tsyx999a { width:980px; margin-top:100px; margin:auto; height:27px; }
#tsyx999a_l { float:left; width:5px;background:green;height:27px; }
#tsyx999a_m { background:red; background-repeat:repeat-x; width:970px; height:27px; float:left; }
#tsyx999a_m span { color:#4675a6; margin-left:10px; float:right;line-height:27px; background-color:#8aceed; }
#tsyx999a_r { width:5px; float:left;background:green;height:27px; }
/*a区结束*/
</style>
</head>
<body>
<div class="container">  
  <div id="tsyx999a">
  <div id="tsyx999a_l"></div>
  <div id="tsyx999a_m"> <span>加入收藏</span> <span>设为首页</span> <span>网站地图</span> </div>
  <div id="tsyx999a_r"></div>
  <div style="clear:both;"></div>
  </div>
</div>
</body>
</html>