请在文本 环绕的子元素(Make text in a
wrap around a

2019-10-22 08:06发布

在Word中,你可以在网页上的图像,并有很好的文字绕流它。 我不知道多远一个可以实现这一使用CSS得到的,并指出是在IE6工作。

我已经有一些使用浮动排序的接近,但浮动的子元素还是“块”文字上面。 因此,部分缠绕。 是否有可能把孩子的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:

据我所知,唯一的办法就是把actualy文本行之间的浮动股利。

<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>


文章来源: Make text in a
wrap around a child element