内分区推外分区

我一直在试图找出这个难题最长的时间。我试图用table，tr和td来模拟传统的HTML表格树结构。内分区推外分区

Firefox和谷歌浏览器的行为是我想要的，但由于某些原因，每个CoreTableRow都没有被推下来以适应IE内部CoreTableCell div的高度。

下面的代码是完全独立的，所以请复制并粘贴到一个空白的HTML文档视图：

html, body, * { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
div.CoreTable { 
 
    position: relative; 
 
    clear: both; 
 
    float: left; 
 
    font-family: Arial, Verdana, Sans-Serif; 
 
} 
 

 
div.CoreTable div.CoreTableRow { 
 
    /* 
 
    display:inline-block; 
 
    display:block; 
 
    */ 
 
    clear: both; 
 
    overflow: hidden; 
 
    border: 2px dotted #0000AA; 
 
} 
 

 
div.CoreTable div.CoreTableRow div.CoreTableCell { 
 
    float: left; 
 
    padding: 2px; 
 
}

<!-- PINK --> 
 

 
<div class="CoreTable" style="background-color: #FFEEEE;"> 
 
    <div class="CoreTableRow"> 
 
    <div class="CoreTableCell">Lorem</div> 
 
    <div class="CoreTableCell">Lorem</div> 
 
    <div class="CoreTableCell">Lorem</div> 
 
    <div class="CoreTableCell">Lorem</div> 
 
    <div class="CoreTableCell">Lorem</div> 
 
    <div class="CoreTableCell" style="width: 300px;"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </div> 
 
    <div class="CoreTableCell" style="width: 300px;"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
 
    </div> 
 
    </div> 
 
    <div class="CoreTableRow"> 
 
    <div class="CoreTableCell">Lorem</div> 
 
    <div class="CoreTableCell">Lorem</div> 
 
    <div class="CoreTableCell" style="width: 200px;"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
 
    </div> 
 
    <div class="CoreTableCell">Lorem</div> 
 
    <div class="CoreTableCell">Lorem</div> 
 
    <div class="CoreTableCell" style="width: 300px;"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </div> 
 
    <div class="CoreTableCell" style="width: 300px;"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
 
    </div> 
 
    </div> 
 
    <div class="CoreTableRow"> 
 
    <div class="CoreTableCell" style="width: 300px;"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
 
    </div> 
 
    <div class="CoreTableCell" style="width: 300px;"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </div> 
 
    <div class="CoreTableCell" style="width: 300px; background-color: #FFAAAA;"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
 
    </div> 
 
    </div> 
 
</div><br /> 
 

 
<!-- GREEN --> 
 

 
<div class="CoreTable" style="background-color: #EEFFEE;"> 
 
    <div class="CoreTableRow"> 
 
    <div class="CoreTableCell">Lorem</div> 
 
    <div class="CoreTableCell">Lorem</div> 
 
    <div class="CoreTableCell">Lorem</div> 
 
    <div class="CoreTableCell">Lorem</div> 
 
    <div class="CoreTableCell">Lorem</div> 
 
    <div class="CoreTableCell" style="width: 300px;"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </div> 
 
    <div class="CoreTableCell" style="width: 300px;"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
 
    </div> 
 
    </div> 
 
    <div class="CoreTableRow"> 
 
    <div class="CoreTableCell">Lorem</div> 
 
    <div class="CoreTableCell">Lorem</div> 
 
    <div class="CoreTableCell" style="width: 200px;"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
 
    </div> 
 
    <div class="CoreTableCell">Lorem</div> 
 
    <div class="CoreTableCell">Lorem</div> 
 
    <div class="CoreTableCell" style="width: 300px;"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </div> 
 
    <div class="CoreTableCell" style="width: 300px; background-color: #AAFFAA;"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
 
    </div> 
 
    </div> 
 
    <div class="CoreTableRow"> 
 
    <div class="CoreTableCell" style="width: 300px;"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
 
    </div> 
 
    <div class="CoreTableCell" style="width: 300px;"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </div> 
 
    <div class="CoreTableCell" style="width: 300px;"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
 
    </div> 
 
    </div> 
 
</div>

预先感谢您的人谁可以找出这个难题XD

来源

2010-10-12 Pantsu

什么是这样做的目的是什么？如果内容是表格数据，那么表格是正确的。 – KatieK 2010-10-12 19:18:10

这是为了准备HTML 5中表格元素和属性的某些弃用而完成的。 – Pantsu 2010-12-03 16:36:45

如果关闭浮动功能，它将自动停止浮动文本。 – 2015-12-28 06:03:42

如果你的意思是你的内部div是“溢出”包含/外部div，解决方案将添加“overflow:auto;”到外部div（coreTable）

来源

2014-09-25 15:26:10

你可以只添加 “显示：inline-block的”

.main{ 
 
    width:400px; 
 
    background:red; 
 
    } 
 
.small{ 
 
    width:100px; 
 
    background:blue; 
 
    height:100px; 
 
    display:inline-block; 
 
    }

<div class="main"> 
 
    <div class="small"></div> 
 
    <div class="small"></div> 
 
    <div class="small"></div> 
 
    <div class="small"></div> 
 
    <div class="small"></div> 
 
    <div class="small"></div> 
 
</div>

来源

2016-05-11 17:16:43

内分区推外分区

回答

相关问题