当前位置： 文江博客话题详情

内格推外格

发布于 2024-09-27 07:45:02 字数 9124 浏览 8 评论 0原文

我很长时间以来一直在试图解开这个谜题。我正在尝试使用带有 table、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

原文

I've been trying to figure out this puzzle for the longest time. I'm trying to simulate a traditional HTML table tree structure using divs with table, tr and then td.

Firefox and Google Chrome behaves as I want but for some reason each CoreTableRow isn't getting pushed down to accommodate the height of the inner CoreTableCell divs in IE.

The below code is completely standalone, so please copy and paste into a blank html document to view:

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>

Thank you in advance for anyone who can figure out this puzzle XD

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

玩物 2024-10-04 07:45:02

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

If you mean that your inner div is "overflowing" the containing/outer div,the solution would be adding "overflow:auto;" to the outer div (coreTable)

回复 原文
烟织青萝梦 2024-10-04 07:45:02

您只需添加“display: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>

You can just add "display: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>

回复 原文
~没有更多了~

关于作者

闻呓

暂无简介

文章
评论
27 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

燃烧我的卡路李先生

文章 0 评论 0

qq_2gSKZM

文章 0 评论 0

∞梦里开花

文章 0 评论 0

qq_IklFPL

文章 0 评论 0

迷途知返

文章 0 评论 0

深海不蓝

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文