gpt4 book ai didi

css - 我怎样才能防止 float 的 div 继承他 sibling 的 margin-top?

转载 作者:行者123 更新时间:2023-11-28 18:55:10 27 4
gpt4 key购买 nike

我有一些 html 代码,看起来像这里的示例:

<html>
<body>
<div id="A" style="float:right; Background-color: Red;">Alpha</div>
<div id="B" style="margin-top: 20px; Background-color: Green;">Bravo</div>
</body>
</html>

我想要实现的是让 A div 位于右上角,B div 位于页面顶部左侧 20 像素处。正如您在下面看到的,它在 IE8 中完全符合我的要求,但在 Chrome 和 Firefox 中效果不佳。

enter image description here

因为这种情况经常发生,我认为 Chrome 和 FF 以这种方式呈现它是正确的,而 IE8 不遵循该标准。所以我的问题是如何在所有浏览器中获得所需的结果(IE 在 SS 中的作用)?

编辑 1 和 2:我编辑了屏幕截图以显示我真的希望 Bravo div 位于 Alpha div 的左侧 但低 20px 而不是像我简单地添加一个清晰的那样在它下面: 就在 Bravo 上。

谢谢

最佳答案

编辑
问题的答案:

<div id="A" style="float:right; background-color: Red; margin-top: -5px;">Alpha</div>
<div id="B" style="margin-top: 20px; background-color: Green;">Bravo</div>

原创
(问题作者原来问这个,后来改了问题...)

clear: right; 添加到 B div 的样式中。可选择使用 clear: both;。并将 div A 包装到包装器 div 中,如下所示:

<div id="wrapper" style="overflow: hidden;">
<div id="A" style="float:right; background-color: Red;">Alpha</div>
</div>
<div id="B" style="margin-top: 50px; background-color: Green; clear: right;">Bravo</div>

关于css - 我怎样才能防止 float 的 div 继承他 sibling 的 margin-top?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8154091/

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