gpt4 book ai didi

html - 在 Chrome 中用 float parent 和 float 和 non-float siblings 切断元素

转载 作者:行者123 更新时间:2023-11-28 16:58:41 24 4
gpt4 key购买 nike

以下代码的行为与我预期的不同:

<!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 的“自然大小”,不包括 float 子元素。

最佳答案

父级 Div 不会容纳所有三个子级的大小。原因是父 div 向左浮动。在 float 元素的情况下,当没有为该元素指定宽度时,它将采用其最大子元素的宽度,即具有最大宽度的子元素。在您的情况下,最后一个元素是具有最大宽度的 child 。我重新创建了以下示例以更好地说明这个概念。 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 parent 和 float 和 non-float siblings 切断元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31655261/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com