1

很长时间以来，我一直试图弄清楚这个谜题。我正在尝试使用带有表格、tr 和 td 的 div 来模拟传统的 HTML 表格树结构。

Firefox 和 Google Chrome 的行为如我所愿，但由于某种原因，每个 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

4

2 回答 2

0

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

于 2014-09-25T15:26:10.227 回答
0

您只需添加“显示：内联块”

.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-11T17:16:43.960 回答