Question

我遇到文本问题，并将其环绕浮动元素。

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

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

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

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

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

2 个答案: