关于 xhtml:使用 CSS 将文本环绕在 div 周围

 2022-02-13 

Wrapping text around a div with CSS

我试图在我的 XHTML 中让文本环绕 div。我的 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 ;
    }