以下代码无法正常运行:

<!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/

10-14 15:38
查看更多