使用display:table-cell不包含display:table

Question

我正在尝试使用CSS 3创建一个语义正确的HTML 5网页.我创建了以下标记,它存在于我的body元素的根部.应用display:table-cell到两个aside和section元素使它们列,因为我想他们.但是,我没有包含要应用的元素display:table.是否可以使用display:table-cell它所应用的元素不包含在display:table？如果没有更好的机制来创建具有这些元素的列布局而不使用浮点数？

<aside>
    <nav>
       <ul>
           <li><a href="#">Link 1</a></li>
           <li><a href="#">Link 2</a></li>
       </ul>
    </nav>
</aside>
<section>
    Content goes here
</section>

Answer 1

Yes, it is valid. Read 17.2.1 of CSS2 spec regarding anonymous table objects. More specifically, these sections...

Generating missing child wrappers:

1. If a child C of a 'table' or 'inline-table' box is not a proper table child, then generate an anonymous 'table-row' box around C and all consecutive siblings of C that are not proper table children.
2. If a child C of a row group box is not a 'table-row' box, then generate an anonymous 'table-row' box around C and all consecutive siblings of C that are not 'table-row' boxes.
3. If a child C of a 'table-row' box is not a 'table-cell', then generate an anonymous 'table-cell' box around C and all consecutive siblings of C that are not 'table-cell' boxes.

Generate missing parents:

1. For each 'table-cell' box C in a sequence of consecutive internal table and 'table-caption' siblings, if C's parent is not a 'table-row' then generate an anonymous 'table-row' box around C and all consecutive siblings of C that are 'table-cell' boxes.

2. For each proper table child C in a sequence of consecutive proper table children, if C is misparented then generate an anonymous 'table' or 'inline-table' box T around C and all consecutive siblings of C that are proper table children. (If C's parent is an 'inline' box, then T must be an 'inline-table' box; otherwise it must be a 'table' box.)

   • 如果'table-row'的父级既不是行组框也不是'table'或'inline-table'框,则它是错误的.
   • 如果'table-column'框的父框既不是'table-column-group'框也不是'table'或'inline-table'框,那么它就是错误的.
   • 如果行父框既不是"表格"框也不是"内联表格"框,则行组框,"表格 - 列组"框或"表格标题"框都是错误的.