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

我正在寻找解决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的顺序不会产生预期的结果。

谢谢！

来源

2011-11-18 thomas

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

Fiddle to prove here

来源

2011-11-18 15:47:16

天啊，我感到很愚蠢，现在......我期待达到你只是做了（在5分钟，包括时间你遇到我的问题）超过2小时...谢谢！ – thomas

呵呵没问题。我多次遇到同样的事情;） –

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

回答

相关问题