Css 浮动：右div仅出现在IE中的下一行

好的，在开始编写webapp之前，我正在开发一个UI原型。我主要是在Firefox中完成设计的，（当然）当我在IE中测试它时，出现了很多渲染问题。其中一个问题是，如果我有一个包含一些文本的div和另一个设置为float的div：对，嵌套的div显示在下一行，在其父div的下面。这是最简单形式的问题标记

<div style="background-color:red;">
    Text
    <div style="background-color:yellow; float:right;">Right</div>
</div>

正文
赖特

我在互联网上搜寻解决方案，我发现在IE中唯一可行的相关解决方案是将浮动div放在其父级的开头，就像这样

<div style="background-color:red;">
    <div style="background-color:yellow; float:right;">Right</div>
    Text
</div>

赖特
正文

---

实际上，嵌套的div有一个类，而我的CSS则浮动该类。但是，如果我最终制作了另一个针对移动设备的样式表，并且我不再希望内部div浮动，会发生什么呢？那么，内容本身在HTML中就会出现问题，只是为了适应IE中的CSS问题。有没有更好的方法来解决这个问题？

我不确定您是否有可能这样做，但将文本放在外部div中，放在自己的div中似乎可以解决问题

<div style="background-color:red;">
    <div style="float: left;">Text</div>
    <div style="background-color:yellow; float:right;">Right</div>
</div>

正文
赖特

在内部div上设置一个宽度值，并使其显示：inline block。Div是占父元素100%宽度的块元素，这就是IE将其放在下一行的原因。

我的一位同事最近遇到了一个非常类似的问题。我建议只使用定位而不是浮动。我相信你也可以这样做：

<div style="background-color:red; position:relative;">
    Text
    <div style="background-color:yellow; position:absolute; right:0; top:0;">Right</div>
</div>

正文
赖特

---

我不知道你是否有使用浮动的要求。使用定位方法将导致定位元素在正常流中不占用空间，但保持正确的源顺序，并在视觉上完成我认为您想要做的事情。

我在IE7中遇到了这个问题-在我的情况下，要清除浮动的项目无论如何都将是全宽的。我刚刚将其设置为“float:none；clear:left”，它似乎起作用。

您使用的是doctype吗？我使用，@sparky，您是在完成后清除float，clear:left还是clear:两者都清除。我还有一个建议，为什么你在一个div里面有文本和另一个div，div不是这样编码的。谢谢你的建议。我试过了，但它给我带来了两个问题。首先，在我的应用程序中，外部div实际上是彩色的。它将是一个基本的导航条，如果我浮动它的两个子项，外部div将塌陷到0px的高度。我可以设置高度，但这种“包装浮动”问题发生在其他内容包装的地方，我无法设置高度。第二个问题是，还有一个来自另一个div的徽标浮动到左侧。现在的方式是，该徽标替换“文本”，但如果我也将其向左浮动，它们会重叠。@spaarky，如果是包装问题，可以使用溢出属性的s@gov我对CSS不是特别熟悉，所以请原谅，如果我遗漏了一些东西，但不会溢出，请在溢出发生时更改行为？我想做的是，首先要防止溢出，让那个儿童div不要用IE包起来。在IE 8中没有运气。这实际上帮助了我。诀窍是定义所有浮动元素的宽度。这很乏味，但是，嘿，你对IE有什么期待？这太简单了，简直是天才！虽然我将添加一条警告，即绝对定位是相对于第一个祖先的非静态定位（默认）。在我的应用程序中，外部div不在页面的开头，因此当我将绝对定位应用于内部div时，它实际上移动到页面的右上角。因此，为了解决这个问题，我向父对象添加了相对定位，而没有指定left或top。它在IE、FF和Safari中完美工作。非常感谢你！等一下，我可能说得太快了。与浮动div不同，定位div绝对允许它与容器的其他子级重叠。您可以通过调整z索引来解决新问题。你有没有可能发布一个更完整的代码示例？我可以，但我不确定这是否有必要。对不起，我在这件事上反反复复。我认为绝对定位会很好。即使我使用的是浮动方法，我也不需要（或者甚至不想，现在我想起来了）文本在浮动div周围流动。因此，如果绝对定位在浏览器中更可靠地工作，我会坚持使用它。我最后做的是将一个div放置在右边，将另一个div的边距设置在右边，以防止其内容重叠。再次感谢你的帮助。你的另类方法启发了我跳出框框思考。我修复了一个类似的问题，将我的最后一个孩子

从其父母的

中移出，后者有其他

兄弟姐妹。谢谢