css图文混排问题#layout ul li{width: 80px;float: left;margin: 20px 0 0px 20px;display: inline

html-css025

css图文混排问题#layout ul li{width: 80px;float: left;margin: 20px 0 0px 20px;display: inline,第1张

下面图片高度固定为68,如果你设置li宽度100那么就多出32像素。

三亚这两个字不超过32像素,就排在一行。

要么在图片下面加个换行

要么把图片宽设为100%

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

工具/原料

Dreamweaver CS5

方法/步骤

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

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

#title{

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

font-weight:bold /* 粗体 */

text-align:center /* 居中 */

}

#content{

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

}

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

然后就是通过测试段落做测试:

<body>

<div id="title">百度经验</div>

<div id="content">

<img src="baidu.png" border="0">

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

</body>

运行后如下所示

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

<style type="text/css">

</style>

中加入:

img{

float:left

}

即控制图片进行左浮动。

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

<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>

运用后效果显示:

<img>标签有align=“”属性~专门控制文字绕图片排列方向。

按照你的图片,代码为:<img src=“图片路径” align=“left” style=“padding:0 10px” />文字内容文字内容文字内容文字内容文字内容文字内容文字内容