当混合浮动和相对定位的元素时，文本被移位

Question

我想用CSS解决一个我发现比预期更棘手的问题。

这是我能够构建的最小（有效）html片段，它揭示了这个问题：

<!doctype html>
<html>
    <head>
        <title></title>
        <style>
            body, div {margin: 0; color: white;}
        </style>
    </head>
    <body>
        <div style="float: left; background-color: #000; width: 200px; height: 200px;"></div>
        <div style="background-color: #333; position: relative; left: 200px; height: 200px;">This is a test !</div>
    </body>
</html>

有人知道如何阻止文本“这是一个测试！” 要通过浮动元素向右移动？

我猜测浮动元素是罪魁祸首，因为当我删除它时，文本位于正确的位置。 同样改变div的顺序也不会产生预期的结果。

谢谢！

Answer 1

替换left: 200px; 在你的右侧div与margin-left: 200px;

小提琴在这里证明

当混合浮动和相对定位的元素时，文本被移位

问题描述

1 个解决方案

解决方案1
2 已采纳 2011-11-18 15:47:16

当混合浮动和相对定位的元素时，文本被移位

问题描述

1 个解决方案

解决方案1 2 已采纳 2011-11-18 15:47:16

解决方案1
2 已采纳 2011-11-18 15:47:16