高分求助一段图片在左 文字在右的代码！
基本要求是：
1.图片在左边，文字在图片的右边
2.图片尺寸为300px*300px，图片右边是文字说明，文字限制在300PX*600PX，
3.不要做成的代码图片跟整个文字不对齐，或者上下错开了！
附上一张截图：
其次，要求右边的文字分列排列，意思就是每一段文字是一个小块！
最好附上虚线，
谢谢，我要的是代码，不是图片，尽量模仿成截图一样的，越像越好！
先奉上100分，解决了继续追加！万分感谢！
<style>
.wrap{
margin:auto;
padding:10px;
width:640px;
border:1px solid #ccc;
}
.wrap .left{
float:left;
width:300px;
height:300px;
}
.wrap .right{
float:right;
width:300px;
height:600px;
}
.clear{
font-size:0px;
clear:both;
}
.line{
border-bottom:1px solid #ccc;
}
.dotted{
border-bottom:1px dotted #ccc;
}
</style>
<div class="wrap">
<div class="left"><img src="http://www.zhongyizhou.com/tmp/test.jpg" /></div>
<div class="right">
<h2>款式介绍</h2>
<div>
你好，你喜欢吗？
</div>
<div class="line"></div>
<p>这里你可以自己填。</p>
<div class="dotted"></div>
</div>
<div class="clear"></div>
</div>
你可以把这段直接考上去试试看效果。或者访问这个链接http://www.zhongyizhou.com/tmp/test.html看效果，根据你要求图片是300*300的，文字是300*600的。
.wrap{
margin:auto;
padding:10px;
width:640px;
border:1px solid #ccc;
}
.wrap .left{
float:left;
width:300px;
height:300px;
}
.wrap .right{
float:right;
width:300px;
height:600px;
}
.clear{
font-size:0px;
clear:both;
}
.line{
border-bottom:1px solid #ccc;
}
.dotted{
border-bottom:1px dotted #ccc;
}
</style>
<div class="wrap">
<div class="left"><img src="http://www.zhongyizhou.com/tmp/test.jpg" /></div>
<div class="right">
<h2>款式介绍</h2>
<div>
你好，你喜欢吗？
</div>
<div class="line"></div>
<p>这里你可以自己填。</p>
<div class="dotted"></div>
</div>
<div class="clear"></div>
</div>
你可以把这段直接考上去试试看效果。或者访问这个链接http://www.zhongyizhou.com/tmp/test.html看效果，根据你要求图片是300*300的，文字是300*600的。
温馨提示：答案为网友推荐，仅供参考
第1个回答 2011-05-24
<!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=gb2312" />
<title>无标题文档</title>
</head>
<body>
<table width="1178" height="528" border="0">
<tr>
<td width="629"><img src="file:///F|/sample/向日葵.jpg" width="613" height="727" /></td>
<td width="539"><table width="548" height="580" border="0" cellpadding="1" cellspacing="1">
<tr>
<td width="111" height="15"> </td>
</tr>
<tr>
<td>1.图片在左边，文字在图片的右边 </td>
</tr>
<tr>
<td>2.图片尺寸为300px*300px，图片右边是文字说明，文字限制在300PX*600PX， </td>
</tr>
<tr>
<td>3.不要做成的代码图片跟整个文字不对齐，或者上下错开了！ </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>本回答被提问者采纳
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<table width="1178" height="528" border="0">
<tr>
<td width="629"><img src="file:///F|/sample/向日葵.jpg" width="613" height="727" /></td>
<td width="539"><table width="548" height="580" border="0" cellpadding="1" cellspacing="1">
<tr>
<td width="111" height="15"> </td>
</tr>
<tr>
<td>1.图片在左边，文字在图片的右边 </td>
</tr>
<tr>
<td>2.图片尺寸为300px*300px，图片右边是文字说明，文字限制在300PX*600PX， </td>
</tr>
<tr>
<td>3.不要做成的代码图片跟整个文字不对齐，或者上下错开了！ </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>本回答被提问者采纳
相似回答