在< div>中建立文字环绕子元素 [英] Make text in a <div> wrap around a child element

问题描述

在Word中，您可以在页面上放置图片，使文字在其周围流畅。我想知道使用CSS有多远，注意到这是必须在IE6工作。

In Word you can place an image on a page and have the text flow nicely around it. I was wondering how far one can get towards this using CSS, noting that is has to work in IE6.

我已经有一些关闭使用float，但浮动子元素仍然阻止它上面的文本。所以它部分包装。可以把一个孩子div放在父母的某个任意位置，并且有自由的文本流动？

I already have something sort of close using float, but the floated child-element still 'blocks' text above it. So it partially wraps. Is it possible to put a child div at some arbitrary position in the parent, and have text flow around it freely?

这里的实际用例是将插图放在

The actual use-case here is to put illustrations inside the main content , where each illustration is implemented inside a child .

我重复一遍，它必须在IE6上工作。我不希望太多的参与浏览器特定的黑客...浮动的孩子至少在IE6上没有调整。

I repeat, it has to work on IE6. And I don't want to get too involved in browser-specific hacks... floating the child at least works on IE6 with no tweaking.

目前我有喜欢这个：

<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放在文本行之间。

As far as I know, the only way is to actualy put the floated div between the lines of text.

<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>中建立文字环绕子元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！