如何使文本换行上面和下面div？ [英] How to make text wrap above and below a div?

问题描述

当元素的顶部对齐时，我没有问题让文本包围div，但我不知道如何让文本包裹在div的上面和下面。

I have no problem getting text to wrap around a div when tops of the elements are aligned, but I can't figure out how to have the text wrap above and below the div.

例如，我想要的文本是#container的全宽度为40px，然后向右卷，然后再全宽再次。

For example I want the text to be the full width of #container for 40px, then wrap around it to the right, and then go full width again.

请参阅 http://jsfiddle.net/cope360/wZw7T / 1 / 。我在哪里添加顶部边距到#inset是我想要的文本包装。是否可以？

See it at http://jsfiddle.net/cope360/wZw7T/1/. Where I added the top-margin to #inset is where I'd like the text to wrap. Is this possible?

CSS：

#inset {
    width: 100px;
    height: 100px;
    background: gray;
    float: left;
    margin-top: 40px;
}

HTML：

<div id="container">
        <div id="inset">Inset</div>
        This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text  should wrap all around. This text should wrap all around. This text  should wrap all around. This text should wrap all around. This text  should wrap all around. This text should wrap all around. This text  should wrap all around. This text should wrap all around. This text  should wrap all around. This text should wrap all around. This text  should wrap all around. This text should wrap all around. This text  should wrap all around. This text should wrap all around. This text  should wrap all around.
</div>

推荐答案

这里有一个解决方案， moontear的答案和 http://www.csstextwrap.com/ 。

Here's a solution that gives the rendering I want based on moontear's answer and http://www.csstextwrap.com/.

CSS：

div {
    float: left;
    clear: left;
}

#inset {
    width: 100px;
    height: 100px;
    background: gray;
    margin: 10px 10px 10px 0px;
}

#spacer {
    width: 0px;
    height: 40px;
}

HTML：

<div id="container">
    <div id="spacer"></div>

    <div id="inset">Inset</div>
    This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text  should wrap all around. This text should wrap all around. This text  should wrap all around. This text should wrap all around. This text  should wrap all around. This text should wrap all around. This text  should wrap all around. This text should wrap all around. This text  should wrap all around. This text should wrap all around. This text  should wrap all around. This text should wrap all around. This text  should wrap all around. This text should wrap all around. This text  should wrap all around.
</div>

请参阅 http://jsfiddle.net/cope360/KbFGv/1/

这篇关于如何使文本换行上面和下面div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！