div 中,图文混排怎么写?

html-css020

div 中,图文混排怎么写?,第1张

div中,图文混排的代码写法:

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

</body>

</html>

(运用后效果显示,上图)

PS:在混排过程中,文字上方容易空出一大片,既占空间,也不美观,因此想像word那样实现图文混排,那就要对图片进行控制。即在样式中中加入:img{ float:left},即控制图片进行左浮动的意思。

css图文混排的关键核心的是文字与图片能否合适的去组合在一起。

图片与文字的排版比例要遵循黄金分割原理1:0.618黄金分割比是我们很早的时候就有学习到的,这也是目前在世界范围内都公认的最好构图比例,黄金分割率的页面比例可以给人带来视觉上的美感。这个是css图文混排的关键核心。

图文混排是版式设计中最常见的情况,图片与文字在传达版面信息上具有不同的特点,图片在视觉传达上可以辅助文字。

<p>

<img src="../201007/image/ct_tow03.jpg">

asdasdsadasdngbhjsdgsdjfgsdjfdsjf

</p>

<style>

img{

float:left

}

p{

padding-top:15px

width:450px

font-size:12px

clear:both

} </style>

注意混排的时候不要用连续的英文和数字 只要有空格或汉字 就能正常显示了