Как я могу препятствовать тому, чтобы перемещенный div унаследовал вершину своего родного брата? - PullRequest
Новая
       1

Как я могу препятствовать тому, чтобы перемещенный div унаследовал вершину своего родного брата?

1 голос
/ 16 ноября 2011

У меня есть HTML-код, похожий на этот пример здесь: 

<html>
  <body>
    <div id="A" style="float:right; Background-color: Red;">Alpha</div>
    <div id="B" style="margin-top: 20px; Background-color: Green;">Bravo</div>
  </body>
</html>

Чего я хотел бы добиться, так это расположить A div в верхнем правом углу и B div, выровненные по левому краю в 20 пикселей от верхней части страницы. Как вы можете видеть ниже, он делает именно то, что я хочу в IE8, но он не совсем работает в Chrome и Firefox.

enter image description here

Поскольку это часто так, я полагаю, что Chrome и FF правы сделать это таким образом, а IE8 не соответствует стандарту. Итак, мой вопрос, как я могу получить желаемый результат (что IE делает в SS) во всех браузерах?

EDIT1 & 2: я отредактировал снимок экрана, чтобы показать, что я действительно хочу, чтобы div Bravo был слева от Alpha div , но на 20px ниже , а не под ним, как если бы я просто добавил clear: прямо на Браво.

Спасибо

Ответы [ 4 ]

1 голос
/ 16 ноября 2011

EDIT Ответ на новый вопрос: 

<div id="A" style="float:right; background-color: Red; margin-top: -5px;">Alpha</div>
<div id="B" style="margin-top: 20px; background-color: Green;">Bravo</div>

ORIGINAL (Автор вопроса изначально задал этот вопрос, а затем изменил вопрос ...)

Добавьте clear: right; в стиле B divПри желании используйте clear: both;.И оберните div A в оболочку div следующим образом: 

<div id="wrapper" style="overflow: hidden;">
    <div id="A" style="float:right; background-color: Red;">Alpha</div>
</div>
<div id="B" style="margin-top: 50px; background-color: Green; clear: right;">Bravo</div>
0 голосов
/ 16 ноября 2011

Добавьте свойство clear в стиль b в div, используйте свойство, наиболее подходящее для рассматриваемого сайта.

Например, both, так что вы ничего не получите с обеих сторон. 

<html>
  <body>
    <div id="A" style="float:right; Background-color: Red; ">Alpha</div>
    <div id="B" style="margin-top: 50px; Background-color: Green; clear: both;">Bravo</div>
  </body>
</html>
0 голосов
/ 16 ноября 2011

Вы должны добавить ясное правило CSS .

  • добавить между двумя divs

    <div style="clear: both" />. (Примечание: в вашем случае просто clear: right работает)

или

  • добавить clear: both в стиле div id="B". (Примечание: в вашем случае просто clear: right работает)

Редактировать: см. Два случая в этой скрипке http://jsfiddle.net/dyGyu/

0 голосов
/ 16 ноября 2011

Попробуйте это: 

<html>
  <body>
    <div id="A" style="float:right; Background-color: Red;">Alpha</div>
    <div id="B" style="float:right; margin-top: 50px; Background-color: Green; clear:right; width:100%;">Bravo</div>
  </body>
</html>

Добавлено:

float:right; clear:right; и width:100%; до #B

Увидеть это в действии - http://jsfiddle.net/SHubq/

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

Нет похожих вопросов

...