Смещение текста при смешивании плавающих и относительно позиционированных элементов - PullRequest
0 голосов
/ 18 ноября 2011

Я пытаюсь решить с помощью 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>

Кто-нибудь знает, как предотвратить текст "Это тест!"Чтобы быть смещенным вправо с помощью плавающего элемента?

Я предполагаю, что плавающий элемент является виновником, поскольку, когда я удаляю его, текст находится в нужном месте.Также изменение порядка делений не дает ожидаемого результата.

Спасибо!

1 Ответ

2 голосов
/ 18 ноября 2011

Замените left: 200px; на правой стороне div на margin-left: 200px;

Fiddle, чтобы доказать здесь

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...