H5页面左图右边文字如何布局

<! DOCTYPE html >
< html  lang ="en" >
< head >
     < meta  charset ="UTF-8" >
     < title >商品 </ title >
     < meta  content ="yes"  name ="apple-mobile-web-app-capable" >
     < meta  content ="yes"  name ="apple-touch-fullscreen" >
     < meta  content ="telephone=no"  name ="format-detection" >
     < meta  content ="black"  name ="apple-mobile-web-app-status-bar-style" >
     < meta  name ="viewport"  content ="width=device-width,minimum-scale=1.0,maximum-scale=1.0" />
     < style  type ="text/css" >
        *{ margin:  0;  padding:  0;}
        .int_goods a{ display:  block; height:  3.467rem; background:  #fff; padding:  0.800rem; display:  -moz-box; display:  -webkit-box; display:  box;  text-decoration:  none; border-bottom:  1px solid #ddd;}
        .left_logo{ width:  3.467rem; height:  3.467rem; border:  1px solid #F0F0F0; position:  absolute; overflow:  hidden;}
        .left_logo img{ width:  100%; position:  relative; top:  50%; transform: translateY(-50%); -ms-transform: translateY(-50%); -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%);}
        .right_des{ height:  3.467rem;  margin-left:  4.267rem; box-flex:  1; -webkit-box-flex:  1; background:  #fff url(http://static.17shihui.com/pageapp/images/serve/jiao.png) no-repeat right center; background-size:  0.375rem 0.625rem;}
        .right_des span,.right_des b{ display:  block; width:  12.347rem; overflow:  hidden; text-overflow: ellipsis; white-space:  nowrap;}
        .right_des span{ font-size:  0.875rem; color:  #2B3139; padding-top:  0.640rem;}
        .right_des b{ font-size:  0.750rem; color:  #79889F; padding-top:  0.3rem;}
     </ style >

</ head >
< body >
     < div  class ="int_goods" >
         < a  href ="" >
             < p  class ="left_logo" >< img  src ="http://static.17shihui.com/pageapp/images/serve/3.jpg" ></ p >
             < p  class ="right_des" >
                 < span >某某某某某某某某某科技有限公司 </ span >
                 < b > 纯天然植物绿色产品 </ b >
             </ p >
         </ a >
     </ div >
</ body >
</ html >

View Code

转载于:https://www.cnblogs.com/xiaoleidiv/p/5477936.html