如何使文本在一个div的上方和下方包起来?[英] How to make text wrap above and below a div?

本文是小编为大家收集整理的关于如何使文本在一个div的上方和下方包起来?的处理方法,想解了如何使文本在一个div的上方和下方包起来?的问题怎么解决?如何使文本在一个div的上方和下方包起来?问题的解决办法?那么可以参考本文帮助大家快速定位并解决问题。

问题描述

当元素的顶部对齐时,我可以将文本包裹在DIV周围,但是我不知道如何将文本包裹在DIV上方和下方.

例如,我希望文本是40px的#Container的完整宽度,然后将其围绕在右侧,然后再次全宽度.

http://jsfiddle.net/cope360/wzw7t/1/1/中.我想在#intet上添加顶级修补件是我希望文本包装的地方.这可能吗?

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

其他推荐答案

简单问题,硬解决方案.您只能使用一个Div将文本包裹在一侧,但是您可以使用几个DIVs.

包裹文本

解决方案比单词更好: http://www.csstextwrap.com/您会看到我的意思是"几个divs".

其他推荐答案

也许不是理想的解决方案,但是如果您将"插图" div放在文本的中间,而不是在顶部,并摆脱顶部边距,它将像您想要的那样包裹.我确实觉得这是一个kludge. 示例

本文地址:https://www.itbaoku.cn/post/566215.html