在图像周围环绕文字，仅 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; 会更容易管理它比在 floated div.

中设置 margin-bottom 更干净

Answer 2

这无法通过您设置的标准来实现。您将需要修改标记。如果您使用 Steve 的回答，文本将换行在图像下方。可以用 jQuery.

Answer 3

试试这个风格：

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

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

OuterDiv 是外部 Div 标签的 class 名称

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

在图像周围环绕文字，仅 css

Wrapping text around image, css only

html

css

word-wrap