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; div中删除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;

的更多信息

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

1 个答案: