Встроенные миниатюры в текст

Встроенные миниатюры обтекаемые текстом слева и справа

by Andrey Dobrovoi

HTML

<div class="post_thumbnail">
  
  <a href="#">
    <img src="http://placehold.it/150x150" class="thumbnail" alt="" />
  </a>
Товарищи! сложившаяся структура организации требуют от нас анализа форм развития. Равным образом дальнейшее развитие различных форм деятельности позволяет выполнять важные задания по разработке системы обучения кадров, соответствует насущным потребностям. Задача организации, в особенности же постоянное информационно-пропагандистское обеспечение нашей деятельности требуют от нас анализа существенных финансовых и административных условий.
С другой стороны новая модель организационной деятельности способствует подготовки и реализации модели развития. Таким образом начало повседневной работы по формированию позиции представляет собой интересный эксперимент проверки направлений прогрессивного развития. С другой стороны консультация с широким активом в значительной степени обуславливает создание соответствующий условий активизации.    
</div>
<hr>
<div class="post_thumbnail">
  <a href="#">
    <img src="http://placehold.it/150x150" class="thumbnail thumbnail_inverse" alt="" />
  </a>
        Равным образом постоянное информационно-пропагандистское обеспечение нашей деятельности играет важную роль в формировании систем массового участия. Таким образом начало повседневной работы по формированию позиции способствует подготовки и реализации системы обучения кадров, соответствует насущным потребностям. Равным образом рамки и место обучения кадров в значительной степени обуславливает создание существенных финансовых и административных условий. Идейные соображения высшего порядка, а также постоянный количественный рост и сфера нашей активности играет важную роль в формировании форм развития.
С другой стороны новая модель организационной деятельности способствует подготовки и реализации модели развития. Таким образом начало повседневной работы по формированию позиции представляет собой интересный эксперимент проверки направлений прогрессивного развития....

CSS

/* ---------------------------------------------------------------------
 Блок с миниатюрой изображения
------------------------------------------------------------------------ */
/* стандартный - миниатюра слева */
.post_thumbnail {
     overflow: hidden;
     padding: 5px 5px 10px;
}
.thumbnail { 
    float:left; 
    margin: 0 15px 5px 0;
    display: block; 
    border: 1px solid #ddd;
    padding: 3px; 
}
/* противоположный - миниатюра справа */
.thumbnail_inverse { 
    float: right; 
    margin: 0 0 5px 15px; 
}