代码之家  ›  专栏  ›  技术社区  ›  David Basarab

为什么文本在图像内部流动时带有浮点:左;不换行?

  •  1
  • David Basarab  · 技术社区  · 16 年前

    我有以下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还是火狐浏览器。

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

    5 回复  |  直到 13 年前
        1
  •  2
  •   Zack The Human Kunal    16 年前

    在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
  •  4
  •   nickf    16 年前

    如果你说的是子弹与图像重叠,你可以增加 margin-right 或将列表更改为 list-style-position: inside .

        3
  •  1
  •   John T    16 年前

    试试这个 <ul> 标签

    style="margin-top: 70px"
    

    alt text http://i38.tinypic.com/303d9x1.png

    我只有IE6,因为我在XP上,我想IE7会比6好(至少我们可以希望)。旧的IE版本笨拙地处理块级元素,新的版本更好。块级元素应采用自己的整行,如 <p> 标签。如果要查看哪些标记是块级别,可以将此行放入CSS中以快速达到峰值:

    * {
    border: 1px solid black;
    }
    

    或下载 Web Developer 插件为火狐,它有一堆漂亮的工具,它有一个“突出块级元素”的功能内置,它把不同颜色的边框围绕在你的元素周围。

        4
  •  0
  •   Matt Mitchell    16 年前

    文本正在FireFox2中为我环绕图像。你能不能贴个截图让我更好地理解问题?

    如果您的意思是项目符号与图像重叠(我确实注意到了),那么我能建议的最好方法是在图像的右边距或禁用项目符号样式:

        5
  •  0
  •   Jonathan Lonowski    16 年前

    我猜这是因为页边空白处正在塌陷,因为列表标记出现在页边空白处。

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