文本环绕浮动元素不在FF中工作

I have a problem with text and the wrapping of it around a floating element.

我有一个文本问题，并围绕浮动元素包裹它。

In IE it does it correct and how I want it! In FF it is acting weird...

在IE中它确实正确，我想要它！在FF，它表现得很奇怪......

Since I'm new, I am not allowed to post images.. Just try the code and you'll see. In FF, the text is wrapping too soon and the surrounding div is not expanding like you would expect.

由于我是新手，我不允许发布图片..只需尝试代码，你就会看到。在FF中，文本包裹得太快，周围的div没有像你期望的那样扩展。

I have searched high and low and tested myself blue, but no result. Does someone know how i can fix this so it is behaving like it should in FF also? I know i can solve it by setting widths, but I want a dynamic layout (if it's possible...)! Code below:

我搜索了高低，并测试了自己蓝色，但没有结果。有人知道我怎么能解决这个问题，所以它在FF中的行为也应该如此吗？我知道我可以通过设置宽度来解决它，但我想要一个动态布局（如果它可能......）！代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    </head>

    <body>

        <table style="border:2px solid steelblue;overflow:hidden;">
            <tr>
                <td style="width:100%;">
                    <div id="page_content" style="float:left;background-color:#ffffff;">
                        <div style="float:right;border:1px solid red;">
                            ROTA FLOATED RIGHT
                        </div>
                        <p style="margin:0;border:1px solid green;">
                            This is just a stupid text to show my point...
                        </p>
                    </div>
                </td>
            </tr>
        </table>

    </body>

</html>

Thanks!

谢谢！

Edit 1 : I have found a solution that is not perfect, but... Using style="display:inline" on the p tag results in good wrapping. Drawback is that margins on the p tag are screwed up. Using padding can counter this, but imo it's a dirty workaround that even brings another problem (margin screwed) to light...

编辑1：我找到了一个不完美的解决方案，但是...在p标签上使用style =“display：inline”可以获得良好的包装效果。缺点是p标签上的边距被搞砸了。使用填充可以解决这个问题，但这是一个肮脏的解决方法，甚至带来另一个问题（边缘拧紧）光...

2 个解决方案

#1

Try this one

试试这个

Just put the 'float:left' in your 'p' tag like this.

只需将'float：left'放在'p'标签中，就像这样。

<p style="margin: 0px; border: 1px solid green; float: left;"> This is just a stupid text to show my point... </p>

Implement this one one and get the result as same in all the browsers

实现这一个并在所有浏览器中获得相同的结果

#2

-3

try this:

尝试这个：

<table style="border:2px solid steelblue;overflow:hidden;">
        <tr>
            <td id="page_content" style="background-color:#ffffff;border:1px solid green;">
                        This is just a stupid text to show my point...
            </td>
            <td style="border:1px solid red;">
                ROTA FLOATED RIGHT
            </td>
        </tr>
    </table>

#1