关于 xhtml：使用 CSS 将文本环绕在 div 周围
Wrapping text around a div with CSS
我试图在我的 XHTML 中让文本环绕
|
<p>content</p>
<p>more content</p> BLALALALALLAAL |
我的 CSS 看起来像……
|
#content-sidebar {
display: block; float: right; width: 270px; height: 400px; border: 1px solid red; } |
你能看出文本不环绕这个 Div 的任何原因吗？
相关讨论
- 内容需要围绕侧边栏流动？我假设那是你所追求的...
- 这是你的网站吗？我问的原因是因为这些天，小泄漏不会沉没大船。他们有舱壁门，在船体破裂时会自动关闭……只是一个想法
- 哈哈，不，这是给客户的。而且不是我写的，只是一个从 PSD 开始的开发人员！
- 我不知道是不是所有的设计师都是这样的，但是当我提到他们的设计时，他们讨厌它......
- 大声笑-但这就是让我这样做的原因；)
- 哈哈，当他也是你的老板的时候就更难了！
是的，你明白了。 #content-sidebar 应该在所有应该package它的文本之前。像这样：
|
BLALALALALLAAL
<p>content</p> <p><center>[wp_ad_camp_2]</center></p><p>more content</p> |
将您的图像切割成相关的切片，并裁剪掉您希望文本流动的部分。你做的切片越多，你的包裹就会越漂亮。
将这些切片放入您的 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; } |
这将使您的切片向左浮动，并将它们作为一个图像组合在一起，让您的文本在右侧流动。边距设置将在图像和文本之间创建边距。
如果您希望图像漂浮在右侧，请剪掉切片的另一侧并使用：
|
.wrap {
float: right; clear: right; margin: 0 0 0 0.9em ; } |
相关讨论
- 为什么要裁剪图像，只需将图像视为sprite。