防止浮动图像清除 ie6 中的 <p>

Question

我正在制作一个所见即所得的网页编辑器：http://brokenmyriad.com/editor2.php，但是在尝试添加图像功能时遇到了问题。

注意：图片不是在 contenteditable 元素中，而只是普通的浮动图片。

可以通过单击段落或标题并单击工具栏上的插入图像按钮（最右侧的按钮）来重现问题。 （在上面的链接页面上）。

在基于标准的浏览器中，它按预期工作，标题和段落都在图像的右侧，但在 ie6 中，段落位于浮动图像下方，如下图所示：http://tinypic.com/view.php?pic=2mfcfo8&s=3

我的简化代码结构如下：

<div>
  <img style='float:left'>
  <h1>Click here to edit!</h1> 
</div>
<div>
  <p>Click here to edit!</p> 
</div>

我想要的是将<p> 元素放在浮动图像旁边，并在基于标准的浏览器中的<h1> 元素下方。

任何帮助将不胜感激！

Answer 1

为什么段落在单独的 div 中？下面的工作不会：

<div>
    <img style='float:left'>
    <h1>Click here to edit!</h1> 
    <p>Click here to edit!</p> 
</div>

如果你必须有 div，那么第二个需要嵌套

<div style="float: left;">
    <img style='float:left'>
    <h1>Click here to edit!</h1> 
    <div style="float: left;">
        <p>Click here to edit!</p> 
    </div>
</div>

Answer 2

你的第二个 div 应该向左浮动：

<div>
   <img style='float:left'>
   <h1>Click here to edit!</h1> 
</div>

<div style="float:left;">
    <p>Click here to edit!</p> 
</div>

Answer 3

原来是

元素上有width:100%，这是导致错误的原因。