图左文右:
<style type="text/css">
img,p{float:left;}
.clearfix:after{display:table;content:"";clear:both;}
.clearfix{*zoom:1;}
</style>
</head>
<body>
<div class="clearfix">
<img src="img/1.png" width="120" hspace="10" vspace="0">
<p style="width:400px;">
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字字文字
</p>
</div>
</body>
将img标签和p标签的浮动改为右浮动即为图右左文若想调整图片或者文字的位置使用margin或者position即可
通过最近的学习 教大家一个更简单的图片文字布局的方法
<style type="text/css">
img{float:left;width:300px;}
</style>
</head>
<body>
<img src="img/list2.png">
<p>
我是文字我是文字
我是文字我是文字
我是文字我是文字
我是文字我是文字
我是文字我是文字
</p>
</body>
这个是图片在左边 文字在右边
如图:
大家可以看到文字有点长 ,你们可以通过给p标签设置width来改变p的长度
图片在右边的 设置float:right 就可以了