English 中文(简体)
内潜推外潜
原标题：Inner Div Pushing Outer Div

我想弄清楚这个谜题已经有很长时间了。我正在尝试使用带有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

问题回答

如果您的意思是内部div“溢出”了包含/外部div，那么解决方案将是向外部div（coreTable）添加“＜code＞overflow：auto；

时间：2014-09-25 15:26:10

您可以添加“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>
时间：2016-05-11 17:16:43


上一篇：
下一篇：


相关问题
CSS working only in Firefox

I am trying to create a search text-field like on the Apple website. The HTML looks like this: <div class="frm-search"> <div> <input class="btn" type="image" src="http://www....

时间：2009-11-13 05:37:01 回答：1 展示：1
image changed but appears the same in browser

I m writing a php script to crop an image. The script overwrites the old image with the new one, but when I reload the page (which is supposed to pickup the new image) I still see the old one. ...

时间：2009-11-09 15:38:06 回答：5 展示：1
Firefox background image horizontal centering oddity

I am building some basic HTML code for a CMS. One of the page-related options in the CMS is "background image" and "stretch page width / height to background image width / height." so that with large ...

时间：2009-11-09 14:33:21 回答：3 展示：1
Separator line in ASP.NET

I d like to add a simple separator line in an aspx web form. Does anyone know how? It sounds easy enough, but still I can t manage to find how to do it.. 10x!

时间：2009-11-05 09:27:29 回答：3 展示：1
热门标签

友情链接

Allggapp Alljchome-教程家园 mvfinale.com-影视剧情大结局大全