例如,我有这几行代码:
<div class = "parent">
<div class = "child1">Hello</div>
<div class = "child2">This child element has the biggest height</div>
<div class = "child3">Just another ordinary class</div>
</div>
我有以下 CSS:
.parent {
display: table;
}
.child1, .child2, .child3 {
float: left;
}
.child1 {height: 200px}
.child2 {height: 1000px}
.child3 {height: 500px}
为什么它会将父元素高度设置为与“child2”相同的高度?为什么不将父元素视为 block 元素(因为 div 显示为 block ,对吗?)?
此外,是否可以使用此 display:table 设置未指定父元素的高度以自动调整为其最大 float 子元素的高度?我读到我们应该避免使用表格,除非内容确实是表格。
最佳答案
有几件事情正在发生。当您使用 display:table
将非表格元素放入元素中时,非表格元素会自动包装在 anonymous objects 中。用于表格行和表格单元格。那么布局树看到的是
table
- table-row
- table-cell
- child1
- child2
- child3
然后,所有表格单元格建立block formatting contexts ,这意味着他们 contain their floats ,很像在没有固定高度的 block 元素上使用 overflow:hidden
作为一种 clearfix。
所以表格单元格完全包含 float ,表格行包含表格单元格,表格包含表格行。这意味着表格将是最大 float 的高度。
是的,可以像这样使用 display:table
。只是不要对非表格数据使用真正的 HTML 表格。
关于html - 为什么显示:table set the parent element's height to its biggest floating child element's height?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50404967/