使用display：table-cell不包含display：table [英] Using display:table-cell without containing display:table

问题描述

我试图创建一个语义正确的HTML 5网页利用CSS 3.我创建了下面的标记存在于我的 body 元素的根。将 display：table-cell 应用于 aside 和节元素会导致他们列为我想他们。但是，我没有包含元素来应用 display：table 。是否可以使用 display：table-cell ，如果它被应用的元素不包含在 display：table ？如果没有，是否有更好的机制，使用这些元素创建列布局，而不使用浮点数。

 < aside& 
< nav> 
< ul> 
< li>< a href =＃>链接1< / a>< / li> 
< li>< a href =＃>链接2< / a>< / li& 
< / ul> 
< / nav> 
< / aside> 
< section> 
内容来到这里
< / section> 
  

解决方案

阅读有关匿名表对象的 17.2.1 CSS2规范。更具体地说，这些部分...

生成缺少的子包装程序：

<

如果'table'或
'inline-table'框的子C不是一个合适的
表子项，那么生成一个
anonymous'table-row

如果子组
C的行组组框是不是
'table-row'框，然后在C和
之间生成一个
anonymous'table-row'框所有C的连续兄弟元素，
不是'table-row

如果
a'table-row'框的子C不是
'table-cell'，则生成
匿名

blockquote>

产生缺少的父母：

1. 每个表格单元格框C在连续内部表
   和'table-caption'同级的
   序列中，如果C的
   父级不是表行，则
   在C和C的所有连续的兄弟姐妹
   之间生成一个匿名的表行框
   ，它们是table-cell框。




2. 对于
   ，每个适当的表子C在一个
   序列的连续适当的表
   子中，如果C是misparented，那么
   生成一个匿名的'table'或
   'inline-table'框T和C的所有
   个连续的兄弟姐妹，它们是
   正确的表子节点。 （如果C的父代
   是'inline'框，则T必须是
   'inline-table'框;否则必须
   是'table'框。）

   
   
   
   
   
   • 如果一个表行不是一个
     行组框，也不是一个'table'或$
   
   
   • 如果其父级为
     ，则'table-column'
     盒子是不正确的'box or
     a'table'or'inline-table'box。
   
   
   • 一行
     组框，'table-column-group' b或'table-caption'框是不正确的
     如果其父节点既不是表框
     也不是内联表框。
   
   
   / li>
   

I'm trying to create a semantically correct HTML 5 web page utilizing CSS 3. I've created the below markup which exists at the root of my body element. Applying display:table-cell to both the aside and section elements causes them to column as I would like them to. However, I have no containing element to apply a display:table to. Is it okay to use display:table-cell if the element which it is being applied to is not contained within a display:table? If not is there a better mechanism to create a column layout with these elements without using floats?

<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>

解决方案

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.)

   • A 'table-row' is misparented if its parent is neither a row group box nor a 'table' or 'inline-table' box.
   • A 'table-column' box is misparented if its parent is neither a 'table-column-group' box nor a 'table' or 'inline-table' box.
   • A row group box, 'table-column-group' box, or 'table-caption' box is misparented if its parent is neither a 'table' box nor an 'inline-table' box.

这篇关于使用display：table-cell不包含display：table的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！