Почему текст течет внутри изображения с плавающей точкой: слева; не упаковка?

Question

У меня есть следующий HTML

<div>
    <img id="image1"
         src="http://valleywag.com/assets/resources/2008/03/BlackGoogleLogo.jpg" 
         alt="Why doesn't this float correcly?"
         style="border-width: 0px; float: left;" />
    <div id="divText" style="font-family: Arial, Helvetica, sans-serif; font-size: 11px;"
          class="txt-Normal">
        <div style="background-color: Green; color: White;">
            <p>
                <strong><span style="font-size: xx-large;">This is going to be big title</span></strong>
            </p>
            <ul>
                <li>
                    <span style="font-size: small;">Foo</span>
                </li>
                <li>
                    <span style="font-size: small;">Bar</span>
                </li>
                <li>
                    <span style="font-size: small;">FooBar</span>
                </li>
                <li>
                    <span style="font-size: small;">BarFoo</span>
                </li>
            </ul>
        </div>
    </div>
</div>

Текст не плавает вокруг изображения. Неважно, является ли браузер IE или Firefox.

Как я могу исправить это, чтобы плавать вокруг изображения?

Answer 1

Если вы говорите о маркерах, перекрывающих изображение, вы можете либо увеличить margin-right на изображении, либо изменить свои списки на list-style-position: inside.

Answer 2

Текст плавает вокруг изображения для меня в IE6 и FireFox2. Есть ли какой-нибудь CSS, который вы оставляете для тестирования?

Вот что я вижу:

Пример 1 http://img214.imageshack.us/img214/6906/ff2topie6bottomhz5.gif

Пример HTML, который вы указали , равен в документе HTML, верно? Если да, то какой тип документа вы используете?

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

Оба элемента всплыли http://img518.imageshack.us/img518/4619/bothfloatedsd7.gif

Вы можете сделать это, изменив код следующим образом:

<div id="divText" style="font-family: Arial, Helvetica, sans-serif; font-size: 11px; float:left;" class="txt-Normal">

Answer 3

попробуйте это в теге <ul>

style="margin-top: 70px"

У меня только IE6, так как я на XP, я думаю, что ie7 будет лучше, чем 6 (мы можем надеяться, по крайней мере). Старые версии IE работают с элементами блочного уровня неловко, новые версии лучше с этим. Элементы уровня блока должны занимать собственную полную строку, например тег <p>. Если вы хотите увидеть, какие теги являются блочными, вы можете поместить эту строку в css, чтобы получить быстрый пик:

* {
border: 1px solid black;
}

или загрузите Web Developer аддон для Firefox, в нем есть набор изящных инструментов и встроенная функция «подсветка элементов уровня блока», которая накладывает различные цветные рамки вокруг ваших элементов. 1016 *

Answer 4

Полагаю, это потому, что поля сжимаются, так как маркер списка появляется на полях.

Вы можете попробовать использовать <ul style="margin-left: 291px;">.

Answer 5

Текст оборачивается вокруг изображения для меня в Firefox2. Можете ли вы опубликовать скриншот, чтобы я лучше понял проблему?

Если вы имеете в виду, что маркеры перекрывают изображение (что я замечаю), то лучшее, что я могу предложить, - это поле справа от изображения или отключить стиль маркера: