Обтекание текста вокруг div с помощью CSS

Я пытаюсь получить текст для обтекания div в моем XHTML. Мой 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?

Ответ 1

Да, вы поняли. # Content-sidebar должен быть перед всеми текстами, которые должны его обернуть. Вот так:

<div id="cont-content">

<div id="content-sidebar">

 BLALALALALLAAL

 </div>

<p>content</p>

<p>more content</p>


  </div>

Ответ 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">

Поместите в свой CSS:

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

Это будет плавать ваши фрагменты влево и держать их вместе как одно изображение, позволяя вашему тексту течь по правому краю. Параметр поля будет, ну, создавать границу между изображением и текстом.

Если вы хотите, чтобы изображение плавало справа, обрезайте другую сторону ваших фрагментов и используйте:

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