Float: правые дивы появляются на следующей строке только в IE

Question

Хорошо, я работаю над прототипом своего пользовательского интерфейса, прежде чем приступить к написанию веб-приложения.Я сделал дизайн в основном во время работы в Firefox и (конечно), когда я тестировал его в IE, было много проблем с рендерингом.Одна из этих проблем заключается в том, что если у меня есть div, содержащий некоторый текст, и другой div, для которого задано значение float: right, этот вложенный div отображается на следующей строке ниже родительского div.Это разметка проблемы в ее простейшей форме ...

<div style="background-color:red;">
    Text
    <div style="background-color:yellow; float:right;">Right</div>
</div>

Я искал в Интернете решения, и единственное работающее соответствующее решение, которое я нашел, которое делает эту работу в IE, - это поместить плавающий div в началеего родителя вот так ...

<div style="background-color:red;">
    <div style="background-color:yellow; float:right;">Right</div>
    Text
</div>

На самом деле, вложенный div имеет класс, и мой CSS перемещает этот класс.Но что произойдет, если в конце концов я создам еще одну таблицу стилей для мобильных устройств и больше не хочу, чтобы этот внутренний div отображался?Тогда сам контент будет не в порядке в HTML, просто для того, чтобы учесть проблему CSS в IE.Есть ли лучший способ решить эту проблему?

Answer 1

У моего коллеги недавно была очень похожая проблема. Я рекомендовал просто использовать позиционирование, а не плавающий. Я считаю, что вы могли бы сделать то же самое здесь:

<div style="background-color:red; position:relative;">
    Text
    <div style="background-color:yellow; position:absolute; right:0; top:0;">Right</div>
</div>

Я не знаю, есть ли у вас требование использовать поплавки или нет. Использование метода позиционирования приведет к тому, что позиционированный элемент не будет занимать место в нормальном потоке, но в противном случае сохранит правильный исходный порядок и визуально выполнит то, что, я думаю, вы хотите сделать.

Answer 2

Установите значение ширины на вашем внутреннем div и сделайте так, чтобы оно отображалось: inline-block.Div - это блочные элементы, которые занимают 100% ширины родительского элемента, поэтому IE помещает его в следующую строку.

Answer 3

Я только что столкнулся с этой проблемой в IE7 - в моем случае элемент, который собирался очистить поплавок, в любом случае должен был иметь полную ширину.Я просто установил для этого значение «float: none; clear: left», и, похоже, оно работает.

Answer 4

Я не уверен, возможно ли это для вас, но помещение текста во внешний div в отдельный div, похоже, решает проблему