在display：table-cell中嵌套display：table-row

Question

我在display：table-cell中的html嵌套display：table-row有一些问题。 我试图在一个表格单元格中嵌套一些表格行。

这是一个HTML结构来说明问题：

 body { background-color:#6699cc; } .row1 { color:black; background-color:white; width: 100%; margin-bottom: 10px; margin-left: auto; margin-right: auto; border-radius: 30px; box-shadow: 10px 10px 10px black; font-family: 'MS sans serif, Fallback, sans-serif'; display:table-row; width:100%; } .row1_cell1 { width:20%; display:table-cell; vertical-align:middle; border:1px solid DarkBlue; } .row1_cell1 img{ width:100%; height:auto; } .row1_cell2 { width:80%; display:table-cell; border:1px solid #F6F934; } .row1_cell2_subrow{ display:table-row; width:100% border:3px solid red; } .subrow_cell1{ display:table-cell; width:60%; text-align:left; border:1px solid blue; } .subrow_cell2{ display:table-cell; width:40%; text-align:right; border:1px solid green; } 

 <div class="row1"> <div class="row1_cell1"> <img class="row1_cell1_image" src="http://icons.iconarchive.com/icons/mazenl77/I-like-buttons-3a/512/Cute-Ball-Go-icon.png"> </div> <div class="row1_cell2"> <div class="row1_cell2_subrow"> <div class="subrow_cell1">subrow1_cell1</div> <div class="subrow_cell2">subrow1_cell2</div> </div> <div class="row1_cell2_subrow"> <div class="subrow_cell1">subrow2_cell1</div> <div class="subrow_cell2">subrow2_cell2</div> </div> </div> </div> 

为什么类“ row1_cell2_subrow”的“ div”没有占据其父级的100％宽度？ 边界怎么也没有显示？

Answer 1

为了有效，您的嵌套需要遵循以下形式：

table > table-row > table-cell > table > table-row > table-cell

换一种说法：

• display：table-cell的元素仅应直接嵌套在display：table-row的元素内。
• display：table-row的元素只能直接嵌套在display：table的元素内

因此，将display：table元素直接放置在display：table-cell元素内部是有效的。 但是将display：table-row元素直接放在display：table-cell元素内部是无效的。