如何防止浮动 div 继承其兄弟的 margin-top ？

发布于 2024-12-15 15:15:39 字数 675 浏览 2 评论 0原文

我有一些类似于此示例的 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 中却不太有效。

在此处输入图像描述

因为这种情况很常见，我认为 Chrome 和 FF 正确地以这种方式呈现它，而 IE8 则不然遵循标准。所以我的问题是如何在所有浏览器中获得所需的结果（IE 在 SS 中的作用）？

编辑1&2：我编辑了屏幕截图以表明我确实希望 Bravo div 位于 Alpha div 的左侧但低 20px，而不是像我简单地添加一个清晰的那样在它下面：就在布拉沃。

谢谢

原文

I have some html code that look like this sample here :

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

What I'd like to achieve is have the A div in the upper right corner and the B div aligned on the left 20 pixels from the top of the page. As you can see below, it does exactly what I want in IE8, but it doesn't quite works in Chrome and Firefox.

enter image description here

Because it's often the case, I suppose Chrome and FF are right to render it this way and IE8 is not following the standard. So my question is how can I get the desired result (What IE does in the SS) across all browser?

EDIT1&2: I edited the screenshot to show that I really want the Bravo div to be on the left of the Alpha div but 20px lower and not under it like it would if I simply add a clear: right on Bravo.

Thanks

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

分开我的手 2024-12-22 15:15:39

编辑
回答新问题：

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

原始
（问题作者最初问这个，后来改了问题...）

在 B div 的样式中添加 clear: right; 。可以选择使用 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>

EDIT
Answer to the new question:

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

ORIGINAL
(The question author originally asked this and later changed the question...)

Add clear: right; into B div's style. Optionally use clear: both;. And wrap div A into a wrapper div like this:

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

回复收藏 0 原文

庆幸我还是我 2024-12-22 15:15:39

试试这个：

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

添加：

float:right; clear:right; 和 width:100%; 到 #B

查看实际效果 - http://jsfiddle.net/SHubq/

Try this:

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

Added:

float:right; clear:right; and width:100%; to #B

See it in action - http://jsfiddle.net/SHubq/

回复收藏 0 原文

梦在深巷 2024-12-22 15:15:39

将 clear 属性添加到 b 的 div 样式中，使用最适合相关网站的属性。

例如both，这样两边都什么也得不到。

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

Add a clear property onto b's div style, use the property that is most appropriate to the site in question.

Such as both so you get nothing either side.

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

回复收藏 0 原文