html - 为什么文本在带有 float : left; not wrapping? 的图像内部流动

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>

文本不会 float 在图像周围。浏览器是 IE 还是 Firefox 都没有关系。

如何解决这个问题使其漂浮在图像周围？

Answer 1

如果您谈论的是与图像重叠的元素符号，您可以增加图像上的 margin-right，或者将列表更改为 list-style-position: inside 。