当前位置：首页 → 问答吧 → IE6下浮动层横向排列宽度自适应问题！！！

IE6下浮动层横向排列宽度自适应问题！！！

时间：2011-10-08

来源：互联网

<!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"> body { margin:0; padding:0; font-family: Verdana; font-size: 12px; color: #000; } .clearit { display: block; margin: 0px; clear: both; padding: 0px; visibility: hidden; background-color:#666666; border:0px none #FFFFFF; } .clearit:after { height: 0px; } .tb { font-size: 12px; line-height: 21px; width: auto; height: auto; color: #000000; padding: 0px 0px 10px 0px; } .cp { background-color: #FFF; border: 1px solid #84C1F4; margin: 0 15px 15px 0; float: left; } .diy_hiscp_tt { background-color: #0A93D5; width: auto; height: 21px; border: 1px solid #FFF; } .diy_hiscp_nub { font-family: Arial; font-size: 12px; line-height: 21px; height: 21px; font-weight: bold; color: #FFF; background-color: #047FAA; padding: 0 6px; float: left; } .diy_hiscp_h { font-size: 12px; line-height: 21px; color: #FFF; padding-left: 7px; float: left; font-family: "宋体"; } </style> </head> <body> <div class="tb"> <div class="cp"> <div class="diy_hiscp_tt"> <div class="diy_hiscp_nub">07</div> <div class="diy_hiscp_h">标题</div> <div class="clearit"></div> </div> <div class="diy_hiscp_txt">此处显示新 Div 标签的内容</div> </div> <div class="cp"> <div class="diy_hiscp_tt"> <div class="diy_hiscp_nub">06</div> <div class="diy_hiscp_h">标题</div> <div class="clearit"></div> </div> <div class="diy_hiscp_txt">此处显示新 Div 标签的内容</div> </div> <div class="cp"> <div class="diy_hiscp_tt"> <div class="diy_hiscp_nub">05</div> <div class="diy_hiscp_h">标题</div> <div class="clearit"></div> </div> <div class="diy_hiscp_txt">此处显示新 Div 标签的内容</div> </div> <div class="cp"> <div class="diy_hiscp_tt"> <div class="diy_hiscp_nub">04</div> <div class="diy_hiscp_h">标题</div> <div class="clearit"></div> </div> <div class="diy_hiscp_txt">此处显示新 Div 标签的内容</div> </div> <div class="cp"> <div class="diy_hiscp_tt"> <div class="diy_hiscp_nub">03</div> <div class="diy_hiscp_h">标题</div> <div class="clearit"></div> </div> <div class="diy_hiscp_txt">此处显示新 Div 标签的内容</div> </div> <div class="cp"> <div class="diy_hiscp_tt"> <div class="diy_hiscp_nub">02</div> <div class="diy_hiscp_h">标题</div> <div class="clearit"></div> </div> <div class="diy_hiscp_txt">此处显示新 Div 标签的内容</div> </div> <div class="cp"> <div class="diy_hiscp_tt"> <div class="diy_hiscp_nub">01</div> <div class="diy_hiscp_h">标题</div> <div class="clearit"></div> </div> <div class="diy_hiscp_txt">此处显示新 Div 标签的内容</div> </div> <div class="clearit"></div> </div> </body> </html>
提示：您可以先修改部分代码再运行

google浏览器下显示正常，IE6下.cp会自动展开，就变成100%宽度了，这不是我想要的效果。
希望达到google浏览器的随内容变化宽度再变化的效果。
给.cp固定了宽度后就显示正常了，但如果不加宽度，有办法实现上面所说的效果么？

[ 本帖最后由 cloudboy 于 2011-10-8 16:33 编辑 ]

作者: cloudboy 发布时间: 2011-10-08

将.cp内的所有子元素进行浮动，不然里面的子元素的宽度默认会达到100%，浮动后宽度就是内容的宽度。试试看

作者: firebirdfly 发布时间: 2011-10-09