在图像周围包裹文字，仅限css

Question

创建此效果的最有效方法是：

• html结构无法更改
• 你只能使用纯css
• 图片尺寸可变
• 主容器的宽度是可变的
• 文本数量可变，可以有100个字符或5000个

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

不改变标记是非常难以管理的。虽然你可以这样使用：

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

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

---

如果您要更改标记，那么通过将h1和p包裹在div中并设置overflow:hidden;可以更轻松地管理该标记而不是在浮动div中设置margin-bottom。

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>