html css布局之float文字环绕案例

时间:2024-03-01 06:57:12

经常我们会看到html css布局中的图片和文字环绕的应用场景,这样的布局形式图文并茂,让读者在浏览页面信息的时候一目了然。

那我们今天就来根据百度百科的HTML5的某一段段落来学习一下,如何利用html css的知识来实现图文并茂的布局吧。

源代码及显示效果如下所示:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>HTML5_百度百科</title>
 6     <style type="text/css">
 7 /*设置主容器的宽度和边框*/
 8 .main_para{
 9     width: 848px;
10     border: 1px solid #e5e5e5;
11 }
12 /*设置第一个div的上边距的距离*/
13 .para_layout{
14     margin-top:30px;
15 }
16 /*设置图片div的宽度及浮动*/
17 .text_pic{
18     width: 220px;
19     float: right;
20 }
21 /*设置图片的宽高及显示的样式*/
22 img{
23     width: 220px;
24     height: 136px;
25     display: block;
26 }
27 /*设置段落的样式*/
28 .para{
29     width:790px;
30     font-size: 14px;
31     word-wrap: break-word;
32     color: #333;
33     margin-bottom: 15px;
34     text-indent: 2em;
35     line-height: 24px;
36     margin-left: 30px;
37 }
38 </style>
39 </head>
40 <body>
41 <div class="main_para">
42 <div class="para para_layout">
43 <div class="text_pic"><img src="image/html5.jpg"></div>
44 标准通用标记语言下的一个应用HTML标准自1999年12月发布的HTML4.01后,后继的HTML5和其它标准被束之高阁,为了推动Web标准化运动的发展,一些公司联合起来,成立了一个叫做 Web Hypertext Application Technology Working Group (Web超文本应用技术工作组 -WHATWG) 的组织。WHATWG 致力于 Web 表单和应用程序,而W3C(World Wide Web Consortium,万维网联盟) 专注于XHTML2.0。在 2006 年,双方决定进行合作,来创建一个新版本的 HTML。</div>
45 <div class="para">HTML5草案的前身名为 Web Applications 1.0,于2004年被WHATWG提出,于2007年被W3C接纳,并成立了新的 HTML 工作团队。</div>
46 <div class="para">HTML 5 的第一份正式草案已于2008年1月22日公布。HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5 支持。</div>
47 <div class="para">2012年12月17日,万维网联盟(W3C)正式宣布凝结了大量网络工作者心血的HTML5规范已经正式定稿。根据W3C的发言稿称:“HTML5是开放的Web网络平台的奠基石。”</div>
48 <div class="para">2013年5月6日, HTML 5.1正式草案公布。该规范定义了第五次重大版本,第一次要修订万维网的核心语言:超文本标记语言(HTML)。在这个版本中,新功能不断推出,以帮助Web应用程序的作者,努力提高新元素互操作性。</div>
49 <div class="para">本次草案的发布,从2012年12月27日至今,进行了多达近百项的修改,包括HTML和XHTML的标签,相关的API、Canvas等,同时HTML5的图像img标签及svg也进行了改进,性能得到进一步提升。</div>
50 <div class="para">支持Html5的浏览器包括Firefox(火狐浏览器),IE9及其更高版本,Chrome(谷歌浏览器),Safari,Opera等;国内的傲游浏览器(Maxthon),以及基于IE或Chromium(Chrome的工程版或称实验版)所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器同样具备支持HTML5的能力。</div>
51 <div class="para">在移动设备开发HTML5应用只有两种方法,要不就是全使用HTML5的语法,要不就是仅使用JavaScript引擎。</div>
52 </div>
53 </body>
54 </html>
View Code

在上面的案例中,我们将要显示的图片html5.jpg放在一个div(类名:text_pic)中。

在源代码中,我们看到了,将div(类名:text_pic)设置成float:right,向右浮动。

float设计最初的主要效果和功能就是要让文本环绕图片,如果给块状元素设定float,就是文本环绕块状元素。