HTML中怎样在图片的右边显示文字

<!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 >
ul,p{margin:0;padding:0;}
li{list-style:none;}
.box{width:500px;margin:100px auto;}
.box .img{float:left;}
.box .img img{width:100px;height:100px;}
.box .list{float:left;width:200px;margin-left:20px;display:inline;}
.box .list li{line-height:24px;font-size:14px;}
.list li span{font-weight:bold;}
</ style >
</ head >
 
< body >
< div  class = "box" >
     < div  class = "img" >
         < img  src = "http://img.baidu.com/img/image/3bf33a87e950352a5947ae485143fbf2b2.jpg"  alt = ""  />
     </ div >
     < ul  class = "list" >
         < li >< span >姓名:</ span >测试</ li >
         < li >< span >性别:</ span >男</ li >
         < li >< span >描述:</ span >< p >测试测试测试测试测试才愁死额</ p ></ li >
     </ ul >
</ div >
</ body >
</ html >

猜你喜欢

转载自blog.csdn.net/findsafety/article/details/80058899
今日推荐