使用 CSS 在 div 周围环绕文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/380184/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Wrapping text around a div with CSS
提问by alex
I am trying to get a text to wrap around a divin my XHTML. My XHTML looks like so....
我试图让一个文本环绕div在我的 XHTML 中。我的 XHTML 看起来像这样....
<div id="cont-content">
<p>content</p>
<p>more content</p>
<div id="content-sidebar">
BLALALALALLAAL
</div>
</div>
And my CSS looks like...
我的 CSS 看起来像...
#content-sidebar {
display: block;
float: right;
width: 270px;
height: 400px;
border: 1px solid red;
}
Can you see any reason why the text will not wrap around this Div?
你能看出为什么文本不会环绕这个 Div 的任何原因吗？
回答by datasn.io
Yep you got it. The #content-sidebar should be before all the texts which are supposed to wrap it. Like this:
是的，你明白了。#content-sidebar 应该在所有应该包装它的文本之前。像这样：
<div id="cont-content">
<div id="content-sidebar">
BLALALALALLAAL
</div>
<p>content</p>
<p>more content</p>
</div>
回答by Peter van Akkeren
Cut your image into relevant slices and crop away the part where you want your text to flow. The more slices you make, the prettier your wrap will be.
put these slices in your HTML. Give them a class called 'wrap', like so:
<img src="slice1.png" width="181" class="wrap"> <img src="slice2.png" width="287" class="wrap"> <img src="slice3.png" width="217" class="wrap">Put in your CSS:
.wrap { float: left; clear: left; margin: 0 0.9em 0 0; }
将您的图像切割成相关的切片，并裁剪掉您希望文本流动的部分。你做的切片越多，你的包裹就越漂亮。
把这些切片放在你的 HTML 中。给他们一个名为“wrap”的类，如下所示：
<img src="slice1.png" width="181" class="wrap"> <img src="slice2.png" width="287" class="wrap"> <img src="slice3.png" width="217" class="wrap">放入你的 CSS：
.wrap { float: left; clear: left; margin: 0 0.9em 0 0; }
This will float your slices to the left and keep them together as one image, allowing your text to flow around on the right. The margin setting will, well, create a margin between image and text.
这将使您的切片向左浮动，并将它们保持在一起作为一个图像，让您的文本在右侧流动。边距设置将在图像和文本之间创建一个边距。
If you want the image to float on the right, crop away the other side of your slices and use:
如果您希望图像浮动在右侧，请裁剪切片的另一侧并使用：
.wrap {
float: right;
clear: right;
margin: 0 0 0 0.9em ;
}
