网页中有时也需要像word那样实现图文混排。那么如何通过CSS实现网页图文混排。
用下面这段话做测试：“百度经验是百度于年10月推出的一款生活知识系新产品。它主要解决用户具体怎样做，重在解决实际问题。在架构上，整合了百度知道的问题和百度百科的格式标准。经验是一篇能指导人们达到某种目的的文章，通常包括概述、工具/原料、步骤/方法、注意事项、参考资料等几个部分，其中步骤/方法详细的描述了达到目的的操作过程，便于学习和模仿。经验一般含有丰富的图片（如果必要），和简明的文字，通常和现实生活联系紧密，能帮助人们解决实际问题。”如何实现图文混排。
网页在没有实现图文混排前的效果，先做CSS样式，看以下代码：#title{ font-size:19px; /*字号大小*/ font-weight:bold; /*粗体*/ text-align:center; /*居中*/}#content{ font-size:16px; /*字号大小*/}这段样式就是对文字作一个简单的设置。
然后就是通过测试段落做测试：bodydivid=title百度经验/divdivid=contentimgsrc=baidu.pngborder=0百度经验是百度于年10月推出的一款生活知识系新产品。它主要解决用户具体怎样做，重在解决实际问题。在架构上，整合了百度知道的问题和百度百科的格式标准。经验是一篇能指导人们达到某种目的的文章，通常包括概述、工具/原料、步骤/方法、注意事项、参考资料等几个部分，其中步骤/方法详细的描述了达到目的的操作过程，便于学习和模仿。经验一般含有丰富的图片（如果必要），和简明的文字，通常和现实生活联系紧密，能帮助人们解决实际问题。/div/body运行后如下所示
文字上方空出一大片，既占空间，也不美观，因此想像word那样实现图文混排，那就要对图片进行控制。styletype=text/css/style中加入：img{ float:left;}即控制图片进行左浮动。
以下是可以实现图文混排的完整的代码：htmlheadtitle图文混排/titlestyletype=text/css#title{ font-size:19px; /*字号*/ font-weight:bold; /*粗体*/ text-align:center; /*居中*/}#content{ font-size:16px; /*字号*/}img{ float:left; /*图文混排*/}/style/headbody divid=title百度经验/div divid=content imgsrc=baidu.pngborder=0百度经验是百度于年10月推出的一款生活知识系新产品。它主要解决用户具体怎样做，重在解决实际问题。在架构上，整合了百度知道的问题和百度百科的格式标准。经验是一篇能指导人们达到某种目的的文章，通常包括概述、工具/原料、步骤/方法、注意事项、参考资料等几个部分，其中步骤/方法详细的描述了达到目的的操作过程，便于学习和模仿。经验一般含有丰富的图片（如果必要），和简明的文字，通常和现实生活联系紧密，能帮助人们解决实际问题。/div/body/html运用后效果显示：