Обтекание текста вокруг 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;
}

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

 BenAlabaster19 дек. 2008 г., 06:55
LOL - и все же это то, что заставляет меня делать это;)
 alex19 дек. 2008 г., 06:53
Я не знаю, все ли дизайнеры такие, но они ненавидят, когда я упоминаю что-то об их дизайне ...
 BenAlabaster19 дек. 2008 г., 06:43
Содержание должно обтекать боковую панель? Я предполагаю, что это то, что вы после ...
 alex19 дек. 2008 г., 06:50
Ха-ха, нет, это для клиента. И я не написал это, просто разработчик, начинающий с PSD!
 alex19 дек. 2008 г., 06:58
Хаха, немного сложнее, когда он тоже твой босс!
 BenAlabaster19 дек. 2008 г., 06:46
Это ваш сайт? Причина, по которой я спрашиваю, состоит в том, что в наши дни небольшие утечки не тонут большие суда. У них есть переборочные двери, которые автоматически закрываются в случае повреждения корпуса ... просто мысль

Ответы на вопрос(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 ;
}
 alex24 дек. 2012 г., 22:02
Зачем обрезать изображение, просто относитесь к нему как к спрайту.
Решение Вопроса

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

<div id="cont-content">

<div id="content-sidebar">

 BLALALALALLAAL

 </div>

<p>content</p>

<p>more content</p>


  </div>

Ваш ответ на вопрос