[分享]css下实现文章围绕图片

今天我们来学习一下如何在网页中使用 CSS 下的框模型来围绕一张图片。 首先，我们需要在 HTML 中插入一张图片： 接下来，我们可以在 CSS 中使用一个 div 元素来包含这张图片，并设置 di...

今天我们来学习一下如何在网页中使用 CSS 下的框模型来围绕一张图片。
首先，我们需要在 HTML 中插入一张图片：

<img src="picture.jpg"> 

接下来，我们可以在 CSS 中使用一个 div 元素来包含这张图片，并设置 div 的宽度和边框样式：

div {
  width: 50%;
  border: 1px solid black;
} 

接着，我们需要让文章的段落围绕这张图片进行排版。为此，我们可以使用 CSS 中的“浮动”属性来实现。在每个段落的样式中，将“float”属性设置为“left”以将其向左浮动。

p {
  float: left;
} 

最后，我们想让文字不要与图片重叠，可以在图片和段落标记之间添加一个“清除浮动”的 div。如下所示：

<div style="clear:both"></div> 

这段代码会告诉浏览器，在 div 内容结束后，清除浮动元素的影响。
现在无需使用 HTML 的表格或其他占位符就可以在网页中展示有趣的文章围绕图片的排版了。