在 <div> 環繞一個子元素

Question

在Word中，您可以將圖像放置在頁面上，並使其周圍的文本順暢地流動。 我想知道使用CSS可以做到這一點有多遠，請注意這在IE6中必須有效。

我已經有一些使用float的結束符，但是浮動的子元素仍然“阻塞”其上方的文本。 因此，它部分包裝。 是否可以將子級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;
}

Answer 1

據我所知，唯一的方法實際上是將浮動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>