第一步，通过设置margin-right属性负值，将图片右移一定的距离：
div#container img {
float: right;
width: 55%;
height: auto;
margin-right: -20%; /* 图片向右移动第一个div宽度20%的距离 */
margin-left: 20px;
margin-bottom: 20px;
}margin-left和margin-bottom属性设置图片与左侧和下方的文字都间距20px。
这个时候图片会和第二列的文字显示重合了：
第二步，通过:before伪元素在第二个div中生成一个元素，它不包含任何内容，仅仅是为了浮动后让文字环绕它。
div#rightcol:before {
content: " ";
float: left;
width: 25%;
padding-top: 102%;
}这个伪元素被设置为左浮动，并且它的宽度与图片右移的距离加起来刚好是图片的宽度。
padding-top属性设置的稍微大一点，这样文字与图片能够空出一些距离。
如果给这个没有任何内容的伪元素添加一个红色的边框，我们就可以看到它的位置：
这个空伪元素的实际作用就是将与图片重合的文字隔开，并使它们环绕，这样就模拟出了右侧文字环绕图片的效果，而实际上文字环绕的是伪元素。
这种环绕方式有一个限制，就是图片必须位于div的顶部，我们不能在垂直方向上任意放置图片。
最后，再设置一些美化的样式和自适应的代码，最终的效果就实现了：
