DIV+CSS教程:[3]CSS中如何实现图文混排

2025-07-06 12:39:09

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

2、网页在没有实现图文混排前的效果,先做CSS样式,看以下代码:#title{ font-size:19px; /* 字号大小 */ font-weight:bold; /* 粗体 */ text-align:center; /* 居中 */}#content{ font-size:16px; /* 字号大小*/}这段样式就是对文字作一个简单的设置。

3、然后就是通过测试段落做测试:<body><div id="title">百度经验</div><div id="content"><img src="baidu.png" border="0">百度经验是百度于2010年10月推出的一款生活知识系新产品。它主要解决用户"具体怎样做",重在解决实际问题。在架构上,整合了百度知道的问题和百度百科的格式标准。经验是一篇能指导人们达到某种目的的文章,通常包括概述、工具/原料、步骤/方法、注意事项、参考资料等几个部分,其中步骤/方法详细的描述了达到目的的操作过程,便于学习和模仿。经验一般含有丰富的图片(如果必要),和简明的文字,通常和现实生活联系紧密,能帮助人们解决实际问题。</div></body>运行后如下所示

DIV+CSS教程:[3]CSS中如何实现图文混排
DIV+CSS教程:[3]CSS中如何实现图文混排

4、文字上方空出一大片,既占空间,也不美观,因此想像word那样实现图文混排,那就要对图片进行控制。<style type="text/css"></style>中加入:img{ float:left;}即控制图片进行左浮动。

DIV+CSS教程:[3]CSS中如何实现图文混排

5、以下是可以实现图文混排的完整的代码:<html><head><title>图文混排</title><style type="text/css">#title{ font-size:19px; /* 字号 */ font-weight:bold; /* 粗体 */ text-align:center; /* 居中 */}#content{ font-size:16px; /* 字号 */}img{ float:left; /* 图文混排 */}</style> </head><body> <div id="title">百度经验</div> <div id="content"> <img src="baidu.png" border="0">百度经验是百度于2010年10月推出的一款生活知识系新产品。它主要解决用户"具体怎样做",重在解决实际问题。在架构上,整合了百度知道的问题和百度百科的格式标准。经验是一篇能指导人们达到某种目的的文章,通常包括概述、工具/原料、步骤/方法、注意事项、参考资料等几个部分,其中步骤/方法详细的描述了达到目的的操作过程,便于学习和模仿。经验一般含有丰富的图片(如果必要),和简明的文字,通常和现实生活联系紧密,能帮助人们解决实际问题。</div></body></html>运用后效果显示:

DIV+CSS教程:[3]CSS中如何实现图文混排
声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢