html div图片文字混排,DIV+CSS教程：[3]CSS中如何实现图文混排

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

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

举报/反馈

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！