当前位置：首页 → 问答吧 → 嵌套DIV浮动问题。。急！！

嵌套DIV浮动问题。。急！！

时间：2010-10-21

来源：互联网

复制内容到剪贴板

代码:

<!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>
<title></title>
<style type="text/css">
      .Coll
      {
         width:300px;
      }
      .Item
      {
         padding: 5px;
         border: thin dashed #CCCCCC;
         float: left;
         width: auto;
         height: 64px;
         max-height: 64px;
         margin-right: 20px;
         margin-bottom: 20px;
      }

      .SubItem1
      {
         float:left;
         width: 64px;
      }
      .SubItem2
      {
         float:left;
         height: 68px;
         min-width: 50px;
         margin-left: 10px;
      }
      .SubItem3
      {
         float:left;
         height:64px;
      }
</style>
</head>
<body>
<div class="Coll">

<div class="Item" >
      <div class="SubItem1"">
         111111
      </div>
      <div class="SubItem2" >
         22222
      </div>
      <div class="SubItem3" >
         33333
      </div>
</div>

<div class="Item" >
      <div class="SubItem1"">
         111111
      </div>
      <div class="SubItem2" >
         22222
      </div>
      <div class="SubItem3" >
         33333
      </div>
</div>

<div class="Item" >
      <div class="SubItem1"">
         111111
      </div>
      <div class="SubItem2" >
         22222
      </div>
      <div class="SubItem3" >
         33333
      </div>
</div>
</div>
</body>
</html>

在IE7,FF下显示第三个ITEM换到第二行去了，但在IE6下第三个ITEM里层DIV把父容器撑高了，并没有换行，这个问题怎么解决啊，我想在IE6里让第三个ITEM自动换行。
谢谢大家了

作者: wangdr 发布时间: 2010-10-21

.Coll width太短导致div换行，换成auto就不换行了

<!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> <title></title> <style type="text/css"> .Coll { width:auto; } .Item { padding: 5px; border: thin dashed #CCCCCC; float: left; width: auto; height: 64px; max-height: 64px; margin-right: 20px; margin-bottom: 20px; } .SubItem1 { float:left; width: 64px; } .SubItem2 { float:left; height: 68px; min-width: 50px; margin-left: 10px; } .SubItem3 { float:left; height:64px; } </style> </head> <body> <div class="Coll">  <div class="Item" > <div class="SubItem1""> 111111 </div> <div class="SubItem2" > 22222 </div> <div class="SubItem3" > 33333 </div> </div>  <div class="Item" > <div class="SubItem1""> 111111 </div> <div class="SubItem2" > 22222 </div> <div class="SubItem3" > 33333 </div> </div>  <div class="Item" > <div class="SubItem1""> 111111 </div> <div class="SubItem2" > 22222 </div> <div class="SubItem3" > 33333 </div> </div> </div> </body> </html>
提示：您可以先修改部分代码再运行

[ 本帖最后由 cwq2jxl 于 2010-10-22 08:48 编辑 ]

作者: cwq2jxl 发布时间: 2010-10-22

换成auto也不行，如果ITEM有10个的情况下，IE6里第一行的最后一个也会把父容器撑高了

作者: wangdr 发布时间: 2010-10-22