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

У меня есть следующий 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.

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

11.12.2008 02:39:15
5 ОТВЕТОВ
РЕШЕНИЕ

Текст плавает вокруг изображения для меня в 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">
2
11.12.2008 03:43:50

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

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

0
11.12.2008 02:46:18

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

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

0
11.12.2008 02:53:02
Хотя тогда его текст не обернется под изображение.
Matt Mitchell 11.12.2008 03:19:08

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

4
11.12.2008 03:17:35

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

style="margin-top: 70px"

альтернативный текст

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

* {
border: 1px solid black;
}

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

1
22.02.2019 20:05:38
Это не правильный способ справиться с этой проблемой. Правильный способ будет применить ясно: слева; или ясно: оба; в UL.
Zack The Human 11.12.2008 04:22:44