1

我有以下 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。

如何解决此问题以在图像周围浮动？

4

5 回答 5

4

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

于 2008-12-11T03:17:35.390 回答
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">
于 2008-12-11T03:12:06.227 回答
1

<ul>在标签中试试这个

style="margin-top: 70px"

替代文字

我只有 IE6，因为我在 xp 上，我想 ie7 会比 6 更好（我们至少可以希望）。旧 IE 版本笨拙地处理块级元素，新版本更好。块级元素应该有自己的整行，就像<p>标签一样。如果您想查看哪些标签是块级别的，您可以将此行放在您的 CSS 中以快速达到峰值：

* {
border: 1px solid black;
}

或者下载 Firefox 的Web Developer插件，它有一堆漂亮的工具，并且它有一个内置的“突出显示块级元素”功能，它在你的元素周围放置不同颜色的边框。

于 2008-12-11T03:51:49.657 回答
0

文本在 Firefox2 中为我环绕图像。您能否发布屏幕截图以便我更好地理解问题？

如果您的意思是项目符号与图像重叠（我确实注意到了），那么我可以建议的最好的方法是在图像上的边距或禁用项目符号样式：

于 2008-12-11T02:46:18.400 回答
0

我猜这是因为列表标记出现在边距中，所以边距正在折叠。

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

于 2008-12-11T02:47:19.180 回答