html - 在图像周围环绕文字，仅 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; 这比在 float div 中设置 margin-bottom 更清晰。