当元素的顶部对齐时,我没有问题让文本环绕div,但我无法弄清楚如何在div的上方和下方包含文本。
例如,我希望文本为40px的#container的全宽,然后将其环绕到右边,然后再次全宽。
看到它 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>
这是一个解决方案,根据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/
容易出问题,难以解决。您只能使用一个div在一侧包装文本,但是您可以使用几个包装文本 DIV
秒。
解决方案比单词更好: http://www.csstextwrap.com/ 试一试,你会看到我对“几个div”的意思。
也许不是理想的解决方案,但是如果你把“插入”div放在文本的中间,而不是顶部,并摆脱顶部边距,它会像你想要的那样包裹起来。我有点觉得这是一个kludge。
例
我有同样的问题,我建立在cope360的答案上,有一些不涉及添加额外标记的东西。这是一个 的jsfiddle 这基本上做同样的事情,但纯粹的CSS。
#inset {
width: 100px;
height: 100px;
background: gray;
float: left;
clear:left;
}
#container:before {
content: " ";
height: 40px;
width: 0px;
float: left;
}
不幸的是,你不能在上面和下面都有文本换行,它目前是html的限制。您将不得不使用几个div并切割内容,使其看起来像是包装。
你只能把它包裹到一边