明确两个显示表后

Question

我有以下HTML

<div id="parent"> 
    <div id="one">one</div> 
    <div id="two">two</idv> 
</div> 

<div id="other">some</div> 

不工作，这是CSS

#one, #two{ 
    display: table-cell; 
    vertical-align: middle; 
    height: 47px; 
    background: red; 
} 

#parent 
{ 
    display:table; 
    border-collapse: separate; 
    border-spacing: 10px 0; 
} 
#other{ 
    background: blue; 
    height: 200px; 
} 

如问题描述清楚这两个不工作，但行为像格前就好像表格一样。解决方法是删除display: table;。但我想知道是否有没有删除display: table;和display: table-cell;从#one,#two股利。

demo

Answer 1

这是一个错字。你应该已经看到了JS的小提琴

<div id="parent"> 
    <div id="one">one</div> 
    <div id="two">two</div> 
</div> 

Demo

这这里的红语法

<div id="two">two</idv> 

应该是

<div id="two">two</div> 

注意：如果您不是在你的演示中使用clear: both;，你甚至不 需要它，因为你不浮动的元素，display: table;只是改变了 显示元素的渲染，是的它确实使他们内联，因为table-cell 并不意味着他们需要清除。只有当您有 浮动元素时，才需要使用clear属性。

欲了解更多信息有关clear: both;