當混合浮動和相對定位的元素時文本被移位

我正在尋找解決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

呵呵沒問題。我多次遇到同樣的事情;） –

當混合浮動和相對定位的元素時文本被移位

回答

相關問題