为什么文本在带有 float: left; 的图像内部流动？不包裹？

发布于 2024-07-10 16:55:40 字数 1335 浏览 5 评论 0原文

我有以下 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 并不重要。

我怎样才能解决这个问题，使其漂浮在图像周围？

原文

I have the following 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>

The text does not float around the image. It does not matter whether the browser IE or Firefox.

How can I fix this to float around the image?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

暗藏城府 2024-07-17 16:55:40

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

回复收藏 0 原文

暖风昔人 2024-07-17 16:55:40

在 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">

The text does float around the image for me in IE6 and FireFox2. Is there any CSS that you're leaving out for us to test?

Here is what I see:

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

The HTML example you provided is in an HTML document right? If so, what doctype are you using?

If you are trying to make all of the text line up with the right side of the image, you may need to float your text's container left as well. That will produce an output like this:

Both Elements Floated http://img518.imageshack.us/img518/4619/bothfloatedsd7.gif

You can do this by modifying your code like this:

<div id="divText" style="font-family: Arial, Helvetica, sans-serif; font-size: 11px; float:left;" class="txt-Normal">

回复收藏 0 原文

尛丟丟 2024-07-17 16:55:40

在

style="margin-top: 70px"

自从我使用 XP 以来，我只使用了 IE6，我想 IE7 会比 6 更好（至少我们可以希望）。旧的 IE 版本处理块级元素的方式很笨拙，新版本在这方面做得更好。块级元素应占据自己的整行，例如

标记。如果您想查看哪些标签是块级的，您可以将此行放入您的 css 中以快速查看：

* {
border: 1px solid black;
}

或下载 Firefox 的 Web 开发者插件，它有很多漂亮的工具，并且内置了“突出显示块级元素”功能，可以在元素周围放置不同颜色的边框。

try this in the <ul> tag

style="margin-top: 70px"

i've only got IE6 since i'm on xp, i imagine ie7 will be a better than 6 (we can hope at least). Old IE versions handle block-level elements awkwardly, the new versions are better with this. Block level elements should take their own full line, like a <p> tag. If you want to see which tags are block level you can either put this line in your css to take a quick peak:

* {
border: 1px solid black;
}

or download the Web Developer addon for firefox, it has a bunch of nifty tools and it has a "highlight block level elements" feature built right in, which puts different colored borders around your elements.

回复收藏 0 原文