以下代码无法正常运行:
<!doctype html>
<title>Test case</title>
<div style="float: left">
<div style="float: left;">Short.</div>
<div></div>
<div style="overflow: hidden;">ALongText.</div>
</div>
在Chrome(44.0.2403.107 m)中,看起来像:
Short.ALon
我假设父div可以容纳所有三个孩子的大小:
Short.ALongText.
或将第三个div推下,因为它不合适:
Short.
ALongText.
Chrome为什么会切断div?
请注意,父元素的宽度等于最后一个子div的“自然大小”,不包括浮动子元素。
最佳答案
父Div不能容纳所有三个孩子的大小。原因是父div浮动到左侧。对于浮动元素,如果未给该元素指定宽度,它将采用其最大子级的宽度,即具有最大宽度的子级。在您的情况下,最后一个元素是最大宽度的子级。我重新创建了以下示例,以更好地说明此概念。
https://jsfiddle.net/osha90/rk2jc89f/
<div style="color:black"><!-- No float-->
<div style="float: left;">Short.</div>
<div></div>
<div style="overflow:hidden">ALongText.</div>
</div>
<div style="float:left;color:red"><!-- First element has max width -->
<div style="float: left;">ALongText.</div>
<div></div>
<div style="overflow:hidden">Short.</div>
</div>
<div style="float:left;color:green"><!-- Second element has max width -->
<div style="float: left;">Short.</div>
<div></div>
<div style="overflow:hidden">ALongText.</div>
</div>
关于html - 在Chrome中使用 float 父对象以及 float 和非 float 同胞来切断元素,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/31655261/