Div+css 实现图文混排

来源：互联网发布：淘宝一件代发发货流程编辑：程序博客网时间：2024/06/05 05:12

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

.imgArea{
width:350px;
height:108px;
}
.imgRArea{
width:222px;
float:left;
padding-top:4px;
}
.imgLAreapic{
float:left;
width:128px;
height:90px;
padding-top:2px;
text-align:center;
}
.imgLAreapic img{
width:115px;
height:70px;
border:#dddddd 1px solid;
margin-bottom:2px;
}
.imgLAreapic a.t{
display:block;
width:117px;
height:21px;
margin:0 auto;
font-size:12px;
color:#333;
line-height:20px;
background:#f1f1f1;
}
.imgRArea li{
padding-left:12px;
width:222px;
height:22px;
line-height:22px;
font-size:14px;
background:url(http://www.woaicss.com/works/pic/skin1v3.png) no-repeat;
overflow:hidden;

}
</style>

</head>
<body>
<div class="imgArea">
  <div class="imgLAreapic"><a href="">
         <img src="http://www.woaicss.com/works/pic/pic1.jpg" alt="" width="115" height="70" border="0" /></a><br><a class="t" href="">蜗爱css-css初学者</a>
  </div>
  <div class="imgRArea">
   <ul>
    <li><a href="http://www.woaicss.com">css初学者-图文混排（一）div</a></li>
    <li><a href="http://www.woaicss.com">蜗爱css新手学习css div+css教</a></li>
    <li><A href="http://www.woaicss.com">经典图文混排立标div+css教程</A></li>
    <li><a href="http://www.woaicss.com">css基础css布局知识 div+css</a></li>
   </ul>
  </div>
</div></body>
</html>