gpt4 book ai didi

html - "margin-top:auto"不工作

转载 作者:太空宇宙 更新时间:2023-11-04 00:22:06 25 4
gpt4 key购买 nike

<div id="home">
<div id="fix">aaa<br />fff</div>
<div id="text">bvvvbbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb </div>
</div>
#fix {
width: 500px;
position: fixed;
background-color: blue;
top:0;
left:0;
}
#text {
background-color: green;
margin-top:auto;
width: 500px;
height: 700px;
}

为什么 margin-top 在此示例中不起作用?

(在div#fix中,数据是用PHP自动生成的。)

演示:http://jsfiddle.net/uK2RK/9/

编辑:现在 div#fix 覆盖到 div#text。我可以设置 margin-top,但我不知道它有多少行,但这是用 PHP 自动生成的。

最佳答案

它按预期工作(您没有说您认为它应该如何工作)。

根据 CSS 2.1 specification 的第 10.6.3 节margin-top 在正常流(#text 是)中的 block 级非替换元素(例如 div)上的值为 auto with overflow: visible(默认值)被视为 margin-top: 0

因此,该元素在正常流中距离前一个元素的底部 0 像素(除非有其他边距/填充在起作用,但实际上没有)。由于唯一的前一个元素 (#fix) 是 position: fixed ,因此不在正常流中,因此没有这样的元素,因此 #text 被放置在距其容器顶部 0 像素处 (#家)。这个位置正好在#fix 下面。

关于html - "margin-top:auto"不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8711026/

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