Плавающий диапазон увеличивает ширину div в IE

Эллада,

У меня проблема со стилем в IE8. Цель состоит в том, чтобы разместить два блока div в одной строке без указания ширины (div должен расширяться вместе с текстом). Работает во всех браузерах, кроме IE. Здесь элемент span, который я плаваю внутри div, растягивает каждый div до максимальной ширины, заставляя другой div начинать со следующей строки. Вот демонстрация jsfiddle:

http://jsfiddle.net/TFnsV/


html css internet-explorer css-float
person travisbotello    schedule 09.07.2012    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я не мог заставить его работать с этой структурой html в IE7 (в IE8 это работает для меня). Но вы можете изменить HTML примерно так:

<div>
    <h2><span class="left">Test one two three</span>
        <span class="right">USD</span>
    </h2>
    <p>Test test test</p>
</div>

И css:

.right{
  width: 20px;

}

.левый{

float:left;

}

Взгляните на это: http://jsfiddle.net/Zn8cU/

РЕДАКТИРОВАТЬ: вы можете добавить это:

h2{
    text-align:right;
}

Обновленный пример: http://jsfiddle.net/5bgH2/

person banana    schedule 09.07.2012
comment
Спасибо за ответ. К сожалению, это не работает. ‹Span class = right› USD ‹/span› не плавает прямо внутри div. например когда я добавляю текст в jsfiddle, usd прикрепляется к левому плавающему диапазону. - person travisbotello; 09.07.2012
comment
<span class="right">USD</span> не перемещается вправо, но текст перемещается влево, поэтому правый диапазон перемещается вправо. Я тестировал его в FF, IE7, IE8 и Chrome. Какой версией IE вы это проверяете? - person banana; 09.07.2012
comment
Ваше утверждение верное, и, возможно, мое описание было не очень ясным, но я не только хочу, чтобы правый диапазон отображался справа от левого диапазона, правый диапазон должен быть перемещен вправо, чтобы он был прикреплен справа от div . Сравните ссылку с ссылка Последний пример, которого я пытаюсь достичь в IE ... - person travisbotello; 09.07.2012