展开全部
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; },即控制图片进行左浮动的意思。
2013-10-25
展开全部
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body{font-size:12px;}
.m_outer{width:500px;height:300px;}
.m_outer img{float:left;padding-right:10px;}
</style>
</head><body>
<div class="m_outer">
<img src="images/qs.jpg" width="97" height="130" alt=""/>
<p>前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师青松前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师</p>
</div>
</body>
</html>
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body{font-size:12px;}
.m_outer{width:500px;height:300px;}
.m_outer img{float:left;padding-right:10px;}
</style>
</head><body>
<div class="m_outer">
<img src="images/qs.jpg" width="97" height="130" alt=""/>
<p>前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师青松前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师前端开发工程师</p>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
2013-10-25
展开全部
加 float
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询