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

Question

Я пытаюсь заставить текст обернуть вокруг 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;
}

Можете ли вы увидеть причину, по которой текст не будет заключен в этот раздел?

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 ;
}