用CSS包装div周围的文本

Question

我正在尝试在我的XHTML中包含div的文本。我的XHTML看起来像......

<div id="cont-content">


<p>content</p>

<p>more content</p>

<div id="content-sidebar">

 BLALALALALLAAL

 </div>

  </div>

我的CSS看起来像......

#content-sidebar {
    display: block;
    float: right;
    width: 270px;
    height: 400px;
    border: 1px solid red;
}

你能看到为什么文本不会包围这个Div的原因吗？

Answer 1

是的，你得到了它。 ＃content-sidebar应该在所有应该包装它的文本之前。像这样：

<div id="cont-content">

<div id="content-sidebar">

 BLALALALALLAAL

 </div>

<p>content</p>

<p>more content</p>


  </div>

Answer 2

1. 将图像剪切成相关切片并裁剪出文本流动的部分。你制作的切片越多，你的包裹就会越漂亮。

2. 将这些切片放入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">
   

3. 加入你的CSS：

   .wrap {
       float: left; 
       clear: left; 
       margin: 0  0.9em 0 0;
   }
   

这会将您的切片浮动到左侧并将它们保持在一起作为一个图像，从而允许您的文本在右侧流动。边距设置将在图像和文本之间创建边距。

如果您希望图像在右侧浮动，请裁掉切片的另一面并使用：

.wrap {
    float: right; 
    clear: right; 
    margin: 0 0 0 0.9em ;
}