如何使文本在 div 上方和下方换行？答案

【问题标题】：How to make text wrap above and below a div?如何使文本在 div 上方和下方换行？
【发布时间】：2014-06-27 08:51:43
【问题描述】：

当元素的顶部对齐时，让文本环绕 div 没有问题，但我不知道如何让文本环绕 div 上方和下方。

例如，我希望文本是 #container 的全宽 40px，然后向右环绕它，然后再次全宽。

查看http://jsfiddle.net/cope360/wZw7T/1/。我将上边距添加到#inset 的位置是我希望文本换行的位置。这可能吗？

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>

【问题讨论】：

容器是否需要作为 html 中的第一个子项？或者你也可以把它放在文本中的某个地方吗？
@Marnix，它可以放在任何地方。 HTML 可以以任何方式构造。我只是试着做一个最简单的例子来说明问题。

标签： html css layout css-float

【解决方案1】：

这是一个解决方案，它根据 Moontear 的回答和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/

【讨论】：

这很漂亮。谢谢！

【解决方案2】：

简单的问题，困难的解决方案。您只能使用一个 div 将文本环绕在一侧，但是您可以使用多个 DIVs 环绕文本。

解决方案胜于言语：http://www.csstextwrap.com/ 试一试，您就会明白我所说的“几个 div”是什么意思。

【讨论】：

【解决方案3】：

也许不是理想的解决方案，但是如果您将“插入” div 放在文本的中间，而不是顶部，并且去掉上边距，它会像您想要的那样换行。我确实觉得这是一个杂牌。 example

【讨论】：

【解决方案4】：

我遇到了同样的问题，我在 cope360 的答案的基础上做了一些不涉及添加额外标记的事情。这是一个jsfiddle，它基本上做同样的事情，但使用纯 css。

#inset {
    width: 100px;
    height: 100px;
    background: gray;
    float: left;
    clear:left;
}
#container:before {
    content: " ";
    height: 40px;
    width: 0px;
    float: left;
}

【讨论】：

+1 用于使用纯 CSS 实现 - 比修改 html 要好得多。不错。

【解决方案5】：

不幸的是，你不能让文本在上面和下面都换行，它目前是 html 的限制。您必须使用多个 div 并将内容切碎以使其看起来像是在包裹。

您只能将其包裹到一侧

【讨论】：

实际上有很多方法可以做到这一点，具有不同的实用性和语义适当性。