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可以让我们测试吗？

以下是我看到的内容：

Example 1 http://img214.imageshack.us/img214/6906/ff2topie6bottomhz5.gif

您在HTML文档中提供的的HTML示例对吗？如果是这样，你使用什么doctype？

如果您尝试将所有文本与图像的右侧对齐，则可能还需要将文本的容器向左浮动。这将产生这样的输出：

Both Elements Floated 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;
}

或下载firefox的Web Developer插件，它有一堆漂亮的工具，它内置了一个“高亮显示块级元素”功能，可以在元素周围添加不同颜色的边框。

Answer 4

在Firefox2中，文字围绕着我的图像。您可以发布截图，以便更好地理解问题吗？

如果你的意思是子弹与图像重叠（我注意到了），那么我建议的最好是图像右边缘或禁用子弹样式：

Answer 5

我猜这是因为边距正在崩溃，因为列表标记出现在边距中。

您可以尝试使用<ul style="margin-left: 291px;">。

为什么文本在float：left;图像内部流动？不包装？

5 个答案: