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

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