使

中的文本环绕子元素

在 Word 中，您可以将图像放置在页面上，并使文本在其周围流畅地排列。我想知道使用 CSS 可以达到什么程度，并指出它必须在 IE6 中工作。

我已经使用浮动进行了某种关闭，但浮动子元素仍然“阻止”其上方的文本。所以它部分包裹。是否可以将子 div 放置在父 div 中的任意位置，并让文本在其周围自由流动？

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

我再说一遍，它必须在 IE6 上运行。而且我不想过多地参与特定于浏览器的黑客行为……浮动子项至少可以在 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;
}

据我所知，唯一的方法是将浮动的 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>