css - 防止 float 图像在ie6中清除<p>

Question

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

注意:该图像不在 contenteditable 元素内，而只是普通的 float 图像。

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

在基于标准的浏览器中，它按预期工作，标题和段落都位于图像的右侧，但是在 ie6 中，段落位于 float 图像下方，如下图所示: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>元素位于 float 图像旁边，并位于 <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>