Верстака мое хобби. Не являюсь профессионалом в ней. Много не знаю, еще больше не умею. Учусь и постигаю. Главное, что есть желание, а все остальное приложится. Время от времени, не очень часто, есть и другие заботы, прогуливаюсь по ресурсам посвященным верстке. Кому-то помогаю, где-то впитываю идеи и решения доселе мне неизвестные, а может быть и забытые мной.

Не что подобное случилось и в этот раз.

Дмитрий, не часто пишет на эту тему, но не которые опубликованные им вещи читать довольно интересно.

Просматривая очередной его пост, вспомнилось, что совсем не давно решал схожую проблему. Там шла речь об портировании картинки в начало абзаца применительно к скрипту Мастера Lasto – Portator Lasto…

Задача стояла несколько иного плана, но то с чего начиналось, посчитал нужным опубликовать, кому-нибудь, где-нибудь да пригодится :)

Скажем так, располагать картинку в параграфе следующим образом, не совсем правильно:

<p>Тест, много текста <img src=""> снова текст</p>

Но бывает, не все же знают и понимают, что и как :) Причем, картинка может находиться в любом месте, а хотелось бы, чтобы она шла слева или справа и если текста много, то обтекалась. Сделать это с помощью css не удалось, но попытка была :)

Но оказывается, кому-то обтекание совершенно не нужно.

html

<div class="box">
<p class="anonce">
…
…
<img src="" alt="">
…
…
</p>
</div>

css

.box {
  border:#000 1px solid;
  margin:10px auto;
  width:500px;
}
.anonce {
  font:11px/1.18 verdana;
  padding:5px;
  position:relative;
  left:130px;
  text-align:justify;
  width:350px;
}
.anonce img {
  border:none;
  position:absolute;
  left:-125px;
  top:5px;
}

А теперь самое время посмотреть, что из всего этого вышло.