环绕浮动元素的文本在 FF 中不起作用答案

【问题标题】：Text rapping around floated element is not working in FF环绕浮动元素的文本在 FF 中不起作用
【发布时间】：2012-09-26 10:08:13
【问题描述】：

我对文本及其围绕浮动元素的包装有疑问。

在 IE 中它是正确的以及我想要它的方式，而在 FF 中它表现得很奇怪...... 在 FF 中，文本换行太快，并且周围的 div 没有像您预期的那样扩展。

我搜索了高低并测试了自己的蓝色，但没有结果。有人知道我该如何解决这个问题，所以它在 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>

【问题讨论】：

1. 那张桌子是干什么用的？我建议不要使用表格进行页面设计。 2. 你有理由使用严格的 XHTML 而不是 HTML5 吗？ 3. 所有的 CSS 都应该放在样式表中 - 而不是混合在 HTML 中。
代码如下：jsfiddle.net/feeela/Bgcxd（在 Chromium 和 Opera 中按预期工作，但在 Firefox# 中没有）
@ANeves 该表是我在一个实际项目中的整体设计的一部分，这个问题源于此。没关系，没有桌子也有同样的问题。当然 css 应该放在样式表中，但我只是想在这里尽可能简洁和容易地展示我的问题，以便查看和重现。
@ANeves （哈哈，这里有有趣的规则......评论只允许在前 5 分钟编辑。所以这是我的新评论！） 1. 表格是我整体设计的一部分一个真正的项目，这个问题源于。没关系，没有桌子也有同样的问题。 2. HTML5 还在开发中，不是吗？我承认我还没有太在意它... 3. 当然 css 应该放在样式表中，但我只是想在这里尽可能紧凑和容易地展示我的问题，以便查看和重现。
@ANeves 这里有一些好信息！谢谢。我只是想说“但我只是想把该死的文本包装好！”，但我不会...... :) 我一定会研究 HTML5 以及它如何改进我的网站。我怎样才能给别人的好 cmets 积分？可能需要更多积分...

标签： css text word-wrap

【解决方案1】：

试试这个

只需像这样将'float:left'放在你的'p'标签中。

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

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

【讨论】：

【解决方案2】：

试试这个：

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

【讨论】：

模拟 Firefox 中任何其他浏览器的错误行为。但 OP 想要摆脱这种行为。
@LifeIsShort 这会在表格行中创建 2 列。我希望文本环绕浮动 div。浮动 p 标签也不是我想要的。在 p 标签上使用 style display:inline 是一种解决方案，但它涉及使用填充，如果可能的话我也想避免......待续！