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

时间:2008-12-11 02:39:16

标签: html css css-float

我有以下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无关紧要。

如何修复此问题以浮动图像?

5 个答案:

答案 0 :(得分:4)

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

答案 1 :(得分: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">

答案 2 :(得分:1)

<ul>标记

中尝试此操作
style="margin-top: 70px"

alt text

我只有IE6,因为我在xp上,我想ie7将优于6(我们至少可以希望)。旧的IE版本笨拙地处理块级元素,新版本更好用。块级元素应该采用自己的完整行,例如<p>标记。如果你想看看哪个标签是块级别,你可以将这一行放在你的css中以快速达到峰值:

* {
border: 1px solid black;
}

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

答案 3 :(得分:0)

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

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

答案 4 :(得分:0)

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

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

豫ICP备18024241号-1