图文混排
来自CloudWiki
图像的并排排列
- 由于img元素为行内元素，因此，不同图像可以在同一行里并排排列。
- 试一试：在 上编辑以下代码：
- 源代码:
<html> <body> <p> 两幅图像： <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=256777305,4083788414&fm=27&gp=0.jpg" height="128" /> <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=80712792,2764415328&fm=27&gp=0.jpg" height="128" /> </p> <p> 一幅动画图像： <img src="/i/eg_cute.gif" width="50" height="50" /> </p> <p>请注意，插入动画图像的语法与插入普通图像的语法没有区别。</p> </body> </html>
图文混排的原理
- 可以通过float将图像设置为浮动的块元素，结合段落的浮动效果，就可以实现图文混排。
- 设置方法：float:left;或float:right;
图像在文字左边
- 给img设置属性 float:left
- 试一试：在W3C实例中实验以下代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Head Line</title>
<style type="text/css">
h1{ background:#678; color:white; text-align:center;}
p{ font-family:Arial; font-size:10pt; line-height:1.5;}
img{padding:5px; margin:10px 10px 10px 0;border:1px gray dashed; float:left;}
</style>
</head>
<body>
<h1>故乡的茶，满是思念的味道</h1>
<img src="/i/eg_tulip.jpg"/>
<p>这些年虽然一直在故乡的千里之外，但从来没有放弃喝老家茶的习惯。每次回老家时，我都要赶上产茶的时节，那样我会买回足够喝上一年的绿茶回来。我现在所居住地方的人们喜欢喝花茶，曾经也想尝试过入乡随俗，但怎么也喝不出故乡的味道。也曾经在很疲倦的时候试着喝一杯咖啡来解解乏，但它常常会太刺激我的胃，让我的胃疼痛不止，而且也很容易让我的身体上火。其实绿茶不仅有消食、提神、利尿、清火的功能，它还有助于美容，因为它具有抗氧化的功能。喝完的茶叶用器皿收集起来，晒过之后可以做夏天的凉枕，或者是用来培植花儿。</p>
</body>
</html>
图像在文字右边
- 给img设置属性 float:right
- 试一试：在W3C实例中实验以下代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Head Line</title>
<style type="text/css">
h1{ background:#678; color:white; text-align:center;}
p{ font-family:Arial; font-size:10pt; line-height:1.5;}
img{padding:5px; margin:10px 10px 10px 0;border:1px gray dashed; float:right;}
</style>
</head>
<body>
<h1>故乡的茶，满是思念的味道</h1>
<img src="/i/eg_tulip.jpg"/>
<p>这些年虽然一直在故乡的千里之外，但从来没有放弃喝老家茶的习惯。每次回老家时，我都要赶上产茶的时节，那样我会买回足够喝上一年的绿茶回来。我现在所居住地方的人们喜欢喝花茶，曾经也想尝试过入乡随俗，但怎么也喝不出故乡的味道。也曾经在很疲倦的时候试着喝一杯咖啡来解解乏，但它常常会太刺激我的胃，让我的胃疼痛不止，而且也很容易让我的身体上火。其实绿茶不仅有消食、提神、利尿、清火的功能，它还有助于美容，因为它具有抗氧化的功能。喝完的茶叶用器皿收集起来，晒过之后可以做夏天的凉枕，或者是用来培植花儿。</p>
</body>
</html>
返回 网页设计与开发
