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>

在<div>中围绕子元素</div>创建文本

1 个答案: