内部Div推动外部Div

时间：2010-10-12 18:43:31

标签： css html push out

我一直试图弄清楚这个难题的时间最长。我正在尝试使用带有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

2 个答案:

答案 0 :(得分：0)

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

答案 1 :(得分：0)

您只需添加＆＃34; display：inline-block＆＃34;

＆＃13;
＆＃13; 
.main{
  width:400px;
  background:red;
  }
.small{
  width:100px;
  background:blue;
  height:100px;
  display:inline-block;
  }
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题