ie7 поплавок правые родительские проблемы ширины

Question

Этот действительно получает мою козу. Мне нужно переместить «Контейнер1» и «Контейнер 2» вправо, чтобы они встали друг против друга, как сейчас. Мне также нужно перемещать предметы внутри Container2 вправо, чтобы они складывались друг на друга. Проблема в том, что если я установлю что-нибудь внутри Container2 (образец текста 2, образец текста 3), чтобы он перемещался вправо, то ширина контейнера Container2 будет равна 100% или около того.

Эту проблему можно решить, задав для Container2 определенную ширину, но это невозможно, поскольку все это динамическое содержимое. Мне нужно, чтобы Container2 рос, поскольку я складываю вещи внутри него.

Есть ли способ обойти это? Это проблема только в ie7, все остальные браузеры кажутся нормальными. Это сводит меня с ума.

<div>
    <div style="width: 100px; height: 100px; background: green; float: left;">
    </div>
    <div id="Container1" style="height: 100px; border: 1px solid #000000; float: right;">
        sample text 1
    </div>
    <div id="Container2" style="height: 100px; border: 1px solid #000000; float: right;">
        <div style="float: right; border: 1px solid #FF0000;">sample text 2</div>
        <div style="float: right; border: 1px solid #00FF00;">sample text 3</div>
    </div>
</div>

Answer 1

Мне не удалось найти исправление этой ошибки в Internet Explorer 7.

Может быть, я не знаю.Я попробовал все обычные приемы.

Вот несколько переработанных кодов, использующих display: inline-block.

Он выглядит идентично вашему старому коду в IE8 и соответствует в IE7 /8 и другие современные браузеры.Yay!

См .: http://jsfiddle.net/SUPhf/

Есть ряд вещей, о которых нужно знать:

• Смотрите эти ссылки, чтобы получитьчувство для display: inline-block:
  • Особенно это: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
  • А также: http://www.brunildo.org/test/inline-block.html
• Мне пришлось поменять порядокэлементы в исходном коде, чтобы визуальное отображение оставалось неизменным.
• Пробелы в вашем HTML имеют большое значение при использовании display: inline-block.
  • Сравните полностью исправленную ссылку выше с этой версией, где единственным изменением является дополнительный пробел:
    http://jsfiddle.net/SUPhf/1/

Теперь, когда выс учетом этих предостережений, это должно быть хорошо.