html - 显示表后清除两者都不起作用

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

如问题中所述，clear 两者都不起作用，但表现得像 div 之前的表格单元格。解决方案是删除display: table;. 但我想知道有没有从div 中删除display: table;和删除的任何想法。display: table-cell;#one,#two

演示

Answer 1

这是一个错字.. 你应该已经看到了 js fiddle 上的红色语法

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

演示

这里

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

应该

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

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

有关更多信息clear: both;