Wrapping text around a div with CSS
我试图在我的 XHTML 中让文本环绕
|
1
2 3 4 5 6 7 |
<p>content</p>
<p>more content</p> BLALALALALLAAL |
我的 CSS 看起来像……
|
1
2 3 4 5 6 7 |
#content-sidebar {
display: block; float: right; width: 270px; height: 400px; border: 1px solid red; } |
你能看出文本不环绕这个 Div 的任何原因吗？
是的，你明白了。 #content-sidebar 应该在所有应该package它的文本之前。像这样：
|
1
2 3 4 5 6 7 |
BLALALALALLAAL
<p>content</p> <p><center>[wp_ad_camp_2]</center></p><p>more content</p> |
将您的图像切割成相关的切片，并裁剪掉您希望文本流动的部分。你做的切片越多，你的包裹就会越漂亮。
将这些切片放入您的 HTML 中。给他们一个名为 //’wrap//’ 的类，像这样：
|
1
2 3 |
<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:
|
1
2 3 4 5 |
.wrap {
float: left; clear: left; margin: 0 0.9em 0 0; } |
这将使您的切片向左浮动，并将它们作为一个图像组合在一起，让您的文本在右侧流动。边距设置将在图像和文本之间创建边距。
如果您希望图像漂浮在右侧，请剪掉切片的另一侧并使用：
|
1
2 3 4 5 |
.wrap {
float: right; clear: right; margin: 0 0 0 0.9em ; } |
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/tech/pnotes/269257.html