Обтекание текста вокруг изображения, CSS только

Question

Что является наиболее эффективным способом для создания этого эффекта, зная, что:

• HTML структура не может быть изменен
• вы можете использовать только чистый CSS
• размеры изображения являются переменными
• ширина основного контейнера является переменной
• сумма из текста переменной, может быть 100 символов или 5000

<div> 
 

 
    <div class="image"> 
 
    <img src="https://placekitten.com/g/320/150"> 
 
    </div> 
 

 
    <h1>Lorem ipsum dolor sit amet</h1> 
 

 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut risus quam. Curabitur lectus nisi, congue a risus sit amet, dignissim posuere enim. Mauris eu arcu id augue sollicitudin dictum. Curabitur id lorem eu magna luctus molestie. Pellentesque ut est purus. Sed id scelerisque elit, nec condimentum augue. Nullam nibh nunc, dictum eget consectetur id, ullamcorper sit amet diam.<br><br>Quisque scelerisque massa ac nisi volutpat, eu posuere metus malesuada. Etiam ligula ante, faucibus sagittis dolor posuere, dignissim pulvinar velit. Nam bibendum neque sed nisl dignissim convallis. Fusce convallis sit amet neque commodo hendrerit. Nunc placerat aliquet libero, nec tincidunt ligula pretium nec. Nam a enim finibus, ultrices lectus ut, accumsan magna. Vestibulum quis vehicula libero. Aenean congue tellus vitae enim feugiat, quis varius eros porta. Proin mattis quam nec fringilla venenatis. Nulla mollis arcu non velit laoreet sodales. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam at cursus sapien.</p> 
 
    
 
</div>

Answer 1

без изменения разметки очень трудно управлять этим. Хотя вы можете использовать так:

.image{ 
    float: left; 
    margin-bottom: 20em;/* you should set as your around paragraph height */ 
} 

<div> 
 

 
    <div class="image" style="float:left;margin-bottom:30em;"> 
 
    <img src="https://placekitten.com/g/320/150"> 
 
    </div> 
 

 
    <h1>Lorem ipsum dolor sit amet</h1> 
 

 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut risus quam. Curabitur lectus nisi, congue a risus sit amet, dignissim posuere enim. Mauris eu arcu id augue sollicitudin dictum. Curabitur id lorem eu magna luctus molestie. Pellentesque ut est purus. Sed id scelerisque elit, nec condimentum augue. Nullam nibh nunc, dictum eget consectetur id, ullamcorper sit amet diam.<br><br>Quisque scelerisque massa ac nisi volutpat, eu posuere metus malesuada. Etiam ligula ante, faucibus sagittis dolor posuere, dignissim pulvinar velit. Nam bibendum neque sed nisl dignissim convallis. Fusce convallis sit amet neque commodo hendrerit. Nunc placerat aliquet libero, nec tincidunt ligula pretium nec. Nam a enim finibus, ultrices lectus ut, accumsan magna. Vestibulum quis vehicula libero. Aenean congue tellus vitae enim feugiat, quis varius eros porta. Proin mattis quam nec fringilla venenatis. Nulla mollis arcu non velit laoreet sodales. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam at cursus sapien.</p> 
 
    
 
</div>

---

Если вы собираетесь изменить разметку, то было бы легче управлять, что, окружив свой h1 и p в div и установка overflow:hidden;, который становится чище, чем установка поля в нижней части плавающего div.

Answer 2

Этого не может быть достигнуто с учетом установленных вами критериев. Вам нужно будет изменить разметку. Если вы используете ответ Стива, текст будет обернут под изображение. Можно сделать это с помощью jQuery.

Answer 3

Попробуйте этот стиль:

<style> 
    .image { 
     padding: 3px; 
     margin: 0 7px 2px 0; 
     display: inline; 
     float: left; 
    } 

    .OuterDiv 
    { 
     display: inline-block; 
    } 
</style> 

OuterDiv это имя класса внешнего тега Div

<div class="OuterDiv"> 
      <div class="image"> 
      .... 
</div>