html - 使 <div> 中的文本环绕子元素

Question

在 Word 中，您可以将图像放在页面上，并让文本在图像周围流畅排列。我想知道使用 CSS 可以在多大程度上实现这一目标，并指出这必须在 IE6 中工作。

我已经使用 float 关闭了一些东西，但是 float 的子元素仍然“阻塞”了它上面的文本。所以它部分包裹。是否可以将子 div 放在父 div 的任意位置，并让文本在其周围自由流动？

这里的实际用例是将插图放在主要内容中，其中每个插图都在子内容中实现。

我再说一遍，它必须在 IE6 上运行。而且我不想过多地参与特定于浏览器的黑客攻击…… float child 至少可以在 IE6 上运行而无需调整。

目前我有这样的:

<div>
    <div class="illustration">
        <img src="image1.png" />
        <p>Illustration caption</p>
    </div>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
    sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, 
    sed diam voluptua. Atvero eos et accusam et justo duo dolores et ea rebum. 
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </p>
</div>

div.illustration
{
    float:right;
    border-top: 1px solid #505050;
    border-left: 1px solid #505050;
    border-right: 1px solid #505050;
    border-bottom: 1px solid #505050;
    margin-right:30px;
    margin-top:100px;
    text-align:center;
    padding:2px;
    background: #96C3FF;
}
div.illustration p
{
    margin:0;
    font-size:small;
    font-style:italic;
    padding:0;
}

Answer 1

据我所知，唯一的方法是实际将 float 的 div 放在文本行之间。

<div style="width: 600px;">
this text will go above the image.
<img style="float:left;" />
this text will go next to and below the image.
</div>