html怎样实现图文混排

网页中有时也需要像word那样实现图文混排。那么如何通过CSS实现网页图文混排。

工具/原料

• Dreamweaver CS5

方法/步骤

• 用下面这段话做测试：“百度经验是百度于2010年10月推出的一款生活知识系新产品。它主要解决用户"具体怎样做"，重在解决实际问题。在架构上，整合了百度知道的问题和百度百科的格式标准。经验是一篇能指导人们达到某种目的的文章，通常包括概述、工具/原料、步骤/方法、注意事项、参考资料等几个部分，其中步骤/方法详细的描述了达到目的的操作过程，便于学习和模仿。经验一般含有丰富的图片（如果必要），和简明的文字，通常和现实生活联系紧密，能帮助人们解决实际问题。”如何实现图文混排。

• 网页在没有实现图文混排前的效果，先做CSS样式，看以下代码：

  #title{

  font-size:19px; /* 字号大小 */

  font-weight:bold; /* 粗体 */

  text-align:center; /* 居中 */

  }

  #content{

  font-size:16px; /* 字号大小*/

  }

  这段样式就是对文字作一个简单的设置。

• 然后就是通过测试段落做测试：

  百度经验

  

  百度经验是百度于2010年10月推出的一款生活知识系新产品。它主要解决用户"具体怎样做"，重在解决实际问题。在架构上，整合了百度知道的问题和百度百科的格式标准。经验是一篇能指导人们达到某种目的的文章，通常包括概述、工具/原料、步骤/方法、注意事项、参考资料等几个部分，其中步骤/方法详细的描述了达到目的的操作过程，便于学习和模仿。经验一般含有丰富的图片（如果必要），和简明的文字，通常和现实生活联系紧密，能帮助人们解决实际问题。

  运行后如下所示

  

  

• 文字上方空出一大片，既占空间，也不美观，因此想像word那样实现图文混排，那就要对图片进行控制。

  中加入：

  img{

  float:left;

  }

  即控制图片进行左浮动。

  

• 以下是可以实现图文混排的完整的代码：

  百度经验

  

  百度经验是百度于2010年10月推出的一款生活知识系新产品。它主要解决用户"具体怎样做"，重在解决实际问题。在架构上，整合了百度知道的问题和百度百科的格式标准。经验是一篇能指导人们达到某种目的的文章，通常包括概述、工具/原料、步骤/方法、注意事项、参考资料等几个部分，其中步骤/方法详细的描述了达到目的的操作过程，便于学习和模仿。经验一般含有丰富的图片（如果必要），和简明的文字，通常和现实生活联系紧密，能帮助人们解决实际问题。

  运用后效果显示：