內分區推外分區

我一直在試圖找出這個難題最長的時間。我試圖用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

內分區推外分區

回答

相關問題