Как плавать текст вокруг изображения

Question

Я создал демо-версию своей проблемы, я борюсь с чем-то таким простым. Мне нужно плавать текст вокруг изображения в div.

Demo exmaple

<div style="float:left; width: 50%; box-sizing: border-box; padding: 10px 10px 10px 0px;"> 

    <div style="background-color: #f6f6f6; box-sizing: border-box; padding: 5px;"> 

     <img src="http://upload.wikimedia.org/wikipedia/commons/8/84/Example.svg" height="300" style="padding: 0 10px 5px 0;" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque volutpat, urna eget convallis ullamcorper, felis ante viverra nunc, sed venenatis eros felis eu magna. Phasellus quis nisl et eros congue ornare. Proin aliquet commodo tincidunt. Morbi pharetra at libero id convallis. Aliquam erat volutpat. Vivamus eu pharetra nibh. Integer ultrices, ex vitae malesuada fringilla, odio arcu semper ante, nec interdum quam mi quis orci. Mauris gravida ut dolor quis bibendum. Vestibulum non cursus erat. Etiam convallis ex mattis, auctor velit sed, luctus leo. Nunc pharetra ligula dictum felis molestie porta. Vivamus volutpat odio id venenatis rutrum. Maecenas auctor turpis vel justo tristique, laoreet volutpat risus dictum.</p> 

    </div> 

</div> 

Answer 1

Может быть ниже код будет помочь тебе. Вместо этого используйте это изображение.

<img src="http://upload.wikimedia.org/wikipedia/commons/8/84/Example.svg" height="300" style="padding: 0 10px 5px 0; float:left;" /> 

Answer 2

недавно нашел только такой кусок может помочь

shape

или добавить вам IMG тег float:left;

element.style { 
    float: left;/*add*/ 
    padding: 0 10px 5px 0; 
} 

Answer 3

Поместите изображение рядом с div, которое вы хотите, чтобы оно плавало рядом, а затем дайте им поплавок влево + ширины. Например:

<div> 
    <img style="float: left; display: block; max-width: 50%;" /> 
    <div style="float: left; width: 50%;"> 
     Some Content 
    </div> 
</div> 

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

Answer 4

увеличить ширину первых дел до 100% и использовать float CSS свойство с изображением, если вы не хотите идти на компромисс с шириной изображения

<div style="float:left; width: 100%; box-sizing: border-box; padding: 10px 10px 10px 0px;"> 

     <div style="background-color: #f6f6f6; box-sizing: border-box; padding: 5px;"> 

      <img src="http://upload.wikimedia.org/wikipedia/commons/8/84/Example.svg" 
      height="300" 
      style="padding: 0 10px 5px 0; float:right;" /> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque volutpat, urna eget convallis ullamcorper, felis ante viverra nunc, sed venenatis eros felis eu magna. Phasellus quis nisl et eros congue ornare. Proin aliquet commodo tincidunt. Morbi pharetra at libero id convallis. Aliquam erat volutpat. Vivamus eu pharetra nibh. Integer ultrices, ex vitae malesuada fringilla, odio arcu semper ante, nec interdum quam mi quis orci. Mauris gravida ut dolor quis bibendum. Vestibulum non cursus erat. Etiam convallis ex mattis, auctor velit sed, luctus leo. Nunc pharetra ligula dictum felis molestie porta. Vivamus volutpat odio id venenatis rutrum. Maecenas auctor turpis vel justo tristique, laoreet volutpat risus dictum. 

     </div>   
</div>