首先我们设置两个div，.leftcol和.rightcol，作为显示：table-cell，a然后将container.container元素设置为显示：table:div#container{display:table;宽度：80%；最大宽度：900px；/*容器的最大宽度为900px*/margin:0auto;line-height:1.5;}div#leftcol,div#rightcol{显示：表格单元格；填充：1em；}div#containerimg{宽度：55%；/*图片的宽度是第一列div的宽度的55%*/height:auto;}这样，文本显示为表格的两列：图片会按原样显示第一列的左上角和底部将与第一行文本的基线对齐。接下来，如果给图片设置一个float:right，它会浮动在第一个div的右侧，文字会环绕在图片的左侧：这里，我们实现了最传统的布局：两列文本，其中一列包含浮动图像。接下来，我们将使用一些技巧来实现左右环绕的文字效果。第一步是通过将margin-right属性设置为负值将图像向右移动一定距离：div#containerimg{float:right;宽度：55%；高度：自动；右边距：-20%；/*图像向右移动第一个div宽度的20%的距离*/margin-left:20px;margin-bottom:20px;}margin-left和margin-bottom属性将图像与左侧和下方文本之间的距离设置为20px。这时候图片会和第二列的文字重叠显示：第二步通过:before伪元素在第二个div中生成一个元素，不包含任何内容，只是让文字换行漂浮后围绕它。div#rightcol:before{内容:"";向左飘浮;宽度：25%；padding-top:102%;}这个伪元素设置为向左浮动，它的宽度恰好等于图片向右移动的距离就是图片的宽度。padding-top属性设置的稍微大一点，这样文字和图片之间可以有一定的距离。如果我们给这个没有任何内容的伪元素加上一个红色的边框，就可以看到它的位置：这个空伪元素的实际作用是把和图片重合的文字分开，让它们环绕起来，从而模拟出文字右侧环绕图片，但文字实际上被伪元素包围。这种环绕方式有一个局限性，就是图片必须在div的最上面，我们不能在垂直方向任意放置图片。最后设置一些美化的样式和自适应代码，最终的效果就实现了：